/*

TemplateMo 568 DigiMedia

https://templatemo.com/tm-568-digimedia

*/

/* ---------------------------------------------
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
--------------------------------------------- 
*/
/* 
---------------------------------------------
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;
}

/* ---- .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: 'Tajawal', 'Tajawal';
  font-weight: 400;
  background-color: #ffffff;
  -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: 30px;
  font-weight: 300;
  color: #000000;
 
}

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

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Tajawal', 'Tajawal';
}

::selection {
  background: #0040ff;
  color: #fff !important;
}

::-moz-selection {
  background: #0040ff;
  color: #fff !important;
}

@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 {
  position: relative;
  z-index: 2;
}

.section-heading h6 {
  font-size: 35px;
  font-weight: 700;
  color: #CDA631;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.section-heading1 h6 {
  font-size: 35px;
  font-weight: 700;
  color: #CDA631;
  text-transform: uppercase;
  margin-bottom: 15px;
  text-align: center;
}
.section-heading10 h6 {
  margin-top: 100px;
  font-size: 35px;
  font-weight: 700;
  color: #CDA631;
  text-transform: uppercase;
  margin-bottom: 15px;
  text-align: right;
}
.section-heading10 h6 {
  font-size: 35px;
  font-weight: 700;
  color: #CDA631;
  text-transform: uppercase;
  margin-bottom: 15px;
  text-align: center;
}

.section-heading h4 {
 
  color: #2a2a2a;
  font-size: 35px;
  font-weight: 700;
  text-transform: capitalize;
}

.section-heading70 h4 {
  margin-top: 100px;
  color: #2a2a2a;
  font-size: 35px;
  font-weight: 800;
  text-transform: capitalize;
  text-align: center;
}

.section-heading71 h4 {
  margin-top: 2px;
  color: #183534;
  font-size: 35px;
  font-weight: 700;
  text-transform: capitalize;
  text-align: center;
}
.section-heading1 h4 {
  color: #ffffff;
  font-size: 35px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 25px;
  text-align: center;
}
.section-heading10 h4 {
  color: #000000;
  font-size: 35px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 25px;
  text-align: left;
}

.section-heading h4 em {
  font-style: normal;
  color: #33a0a4
}

.section-heading70 h4 em {
  font-style: normal;
  color: #CDA631

}
.section-heading71 h4 em {
  font-style: normal;
  color: #CDA631;

}

.section-heading1 h4 em {
  font-style: normal;
  color: #CDA631;
}
.section-heading10 h4 em {
  font-style: normal;
  color: #CDA631;
}

.section-heading .line-dec {
  width: 50px;
  height: 2px;
  background-color: #183534;
}

.section-heading70 .line-dec {
  text-align: center;
  width: 50px;
  height: 2px;
  background-color: #183534;
  margin: 10px auto; 
}


.section-heading1 .line-dec {
  width: 50px;
  height: 2px;
  background-color: #CDA631;
  margin: 10px auto;
}

.border-first-button123 {
  display: none; /* Hide buttons by default */
}
.border-first-button123 a {
  margin-top: -10px;
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #CDA631 !important;
  border: 1px solid #CDA631 !important;
  border-radius: 23px;
  font-weight: 550 !important;
  letter-spacing: 0.3px !important;
  /*transition: all .5s;*/
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.border-first-button125 {
  position: relative;
  margin-top: -17px; /* Adjust this value to push the dropdown down */
  display: flex; /* Use flexbox for layout */
  justify-content: flex-end; /* Align items to the right */
}

.styled-dropdown {
  display: inline-block;
  padding: 3px 10px; /* Reduced padding for a smaller box */
  color: #33a0a4;
  border: 1px solid #33a0a4;
  border-radius: 10px; /* Reduced border radius for a more compact look */
  font-weight: 550;
  font-size: 12px; /* Decrease font size for a smaller appearance */
  letter-spacing: 0.3px;
  background-color: transparent; /* Make the background transparent */
  appearance: none; /* Remove default dropdown styling */
  -webkit-appearance: none; /* For Safari */
  -moz-appearance: none; /* For Firefox */
  cursor: pointer;
  margin-top: 10px; /* Space above the dropdown */
  text-align: right; /* Align text to the right */
}

/* Add a custom arrow */
.styled-dropdown::after {
  content: '▼'; /* Unicode for down arrow */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #CDA631; /* Arrow color */
  pointer-events: none; /* Prevent interaction with the arrow */
}

/* Optional: Add hover effect */
.styled-dropdown:hover {
  border-color: #33a0a9; /* Darker border on hover */
}

/* Style for options */
.styled-dropdown option {
  text-align: right; /* Align options text to the right */
}
/* Show buttons on screens smaller than 768px */
@media (max-width: 768px) {
  .border-first-button123 {
    display: flex; /* Use flexbox for layout */
    flex-direction: row; /* Arrange buttons next to each other */
    gap: 10px; /* Space between buttons */
    align-items: center; /* Align buttons vertically in the center */
    justify-content: center; /* Center buttons horizontally */
    margin-bottom: -30px; /* Space below the button container */
    position: relative; /* Enable positioning context */
    top: -50px; /* Move the button container up */
  }

  .border-first-button123 a {
    flex: 0; /* Prevent buttons from stretching */
    font-size: 14px; /* Decrease font size for better fit */
    text-align: center; /* Center text within buttons */
    width: auto; /* Auto width to fit the content */
    background-color: #ffffff; /* Button background color */
    color: #CDA631; /* Text color */
    border: none; /* Remove border if desired */
    border-radius: 23px; /* Rounded corners */
  }
}

.border-first-button a {
  margin-top: -10px;
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #CDA631 !important;
  border: 1px solid #CDA631 !important;
  border-radius: 23px;
  font-weight: 550 !important;
  letter-spacing: 0.3px !important;
  /*transition: all .5s;*/
}

.border-first-button1 {
  text-align: center;        /* Center-align the button */
  margin-top: 20px;         /* Space above the button */
}

.border-first-button1 a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #CDA631 !important;
  border: 1px solid #CDA631 !important;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  /*transition: all .5s;*/
}

.border-first-button1 a:hover {
  background-color: #CDA631;
  color: #fff !important;
}



/* 
---------------------------------------------
intro
--------------------------------------------- 
*/


.intro-banner {
  text-align: center;
  padding-top: 200px;margin-bottom: 100px;
  position: relative;
}

.intro-banner:after {
  content: '';
  /**background-image: url(../images/slider-left-dec.jpg);**/
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 262px;
  height: 625px;
  z-index: 1;
}
/*
.intro-banner:before {
  content: '';
  background-image: url(../images/slider-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 0px;
  width: 1159px;
  height: 797px;
  z-index: 2;
}
*/

.intro-banner img {
  max-width: 152px;
  margin-bottom: 30px;
}

.intro-banner h1 {
  font-size: 36px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 30px;
  position: relative; 
  z-index: 2;
}

.intro-banner h4 {
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 400;
  margin-bottom: 20px;
  position: relative; 
  z-index: 2;
}

.intro-banner a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #0040ff !important;
  border: 1px solid #0040ff !important;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  /*transition: all .5s;*/
  position: relative; 
  z-index: 2;
}

.intro-banner a:hover {
  background-color: #CDA631;
  color: #fff !important;
}

.demos {
  padding-top: 60px;
}

.demo-item {
  position: relative;
  z-index: 2;
}

.demos img {
  /*transition: all .5s;*/
  border-radius: 23px;
}

.demos img:hover {
  opacity: 1;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.25);
}

.demos h4 {
  text-align: center;
  font-size: 20px;
  margin-top: 30px;
  font-weight: 700;
  text-transform: uppercase;
}


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

.pre-header {
  background-color: #183534;
  height: 50px;
  padding: 15px 0;                /* Vertical padding */
}

.pre-header ul {
  padding: 0;                     /* Remove default padding */
  margin: 0;                      /* Remove default margin */
}

.pre-header ul.info {
  display: flex;                  /* Use flexbox for horizontal alignment */
  justify-content: flex-end;      /* Align items to the right */
  align-items: left;            /* Center items vertically */
}

.pre-header ul.info li {
  margin-left: 55px;              /* Add space between list items */
}

.pre-header ul.info li:last-child {
  margin-right: 100px;                /* Remove margin from the last item */
}

  .pre-header ul.info li a {
    color: #ffffff;
    font-size: 14px;
    padding: 10px 0;             /* Adjust padding for horizontal spacing */
    display: block;                 /* Ensure the anchor behaves like a block */
  }

.pre-header ul.info li a:hover {
  color: #CDA631;                 /* Change color on hover */
}

.pre-header ul.info li a i {
  font-size: 18px;
  margin-right: 5px;             /* Space between icon and text */
}

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

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #000000;
}

.background-header .main-nav .nav li:hover a {
  color: #414141;
}

.background-header .nav li a.active {
  position: relative;
  color: #fff;
}

.background-header .nav li a.active:after {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #CDA631;
  content: '';
  transform: translateX(-50%);
}

.background-header .nav li:last-child a.active:after {
  background-color: transparent;
}

.header-area {
  background-color: #ffffff;
  box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 1000;
  height: 0px;
  top: 0px;
  /*-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: 100px;
  background: transparent;
}

.header-area .main-nav .logo {
  display: block; /* Ensure the logo is a block element */
  float: none; /* Remove float */
  max-width: 150px; /* Set a max width for the logo */
  height: auto; /* Maintain aspect ratio */
  margin-top: -30px;
  margin-left: -30px;
}

.header-area .main-nav .logo {
    line-height: 5px;
    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;*/
}

@media (max-width: 768px) {
  .header-area .main-nav .logo {
      max-width: 100px; /* Reduce max width for mobile */
      margin-top: 0; /* Adjust margin for better appearance */
      margin-left: 0; /* Reset left margin */
      width: auto; /* Allow the width to be flexible */
  }
}


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

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

.header-area .main-nav .nav {
  float: right;                         /* Align items to the left */
  margin-top: 30px;
  margin-right: 0px;
  margin-left: 20px;                  /* Add left margin to push items to the right */
  background-color: transparent;
  position: relative;
  display: flex;                       /* Use flexbox for layout */
  justify-content: flex-start;         /* Align items to the left */
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;                 /* Space on the left */
  padding-right: 20px;                /* Space on the right */
  list-style: none;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;                 /* Remove padding on the right for the last item */
  padding-left: 40px;                 /* More padding on the left for the last item */
}

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

.header-area .main-nav .nav li:last-child a:hover,
.background-header .main-nav .nav li:last-child a:hover {
  color: #CDA631 !important;          /* Change color on hover */
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}


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

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

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

.header-area .main-nav .nav li.submenu:after {
  font-family: Tajawal;
  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;
  /*: 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: #85335e!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: #2a2a2a;
  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: #2a2a2a;
}

.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: #2a2a2a;
  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: #2a2a2a;
}

.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: #2a2a2a;
}

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

.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: #2a2a2a;
}

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

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

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

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

@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;
  }
  .background-header .nav li a.active:after {
    display: none;
  }
}

@media (max-width: 767px) {
  .background-header .main-nav .nav {
    margin-top: 80px !important;
    top: -30px;
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #CDA631!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #fff;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
    box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
    top: 0px;
  }
  .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: #CDA631!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: 767px) {
  .header-area .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: #000000;
    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: #000000;
    border-radius: 50%;
}



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

.main-banner {
  background-repeat: no-repeat;
  background-color: #f4f4f3;
  background-image: url('../images/back2.png');
  background-position: center center;
  background-size: cover;
  padding: 60px 0px 60px 0px;
  position: relative;
  overflow: hidden;
  height: 580px;
}


.main-banner:after {
  content: '';
  /**background-image: url(../images/slider-left-dec.jpg);**/
  background-color: #f4f4f3;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 100vw;
  height: 797px;
  z-index: -1;
}

.main-banner:before {
  content: '';
  /**background-image: url(../images/slider-right-dec.jpg);**/
  background-color: #f4f4f3;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  top: 0px;
  width: 100vw;
  height: 797px;
  z-index: -1;
}

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

.main-banner .left-content h6 {
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 700;
  color: #CDA631;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.main-banner .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 30px;
  color: #2a2a2a;
  margin-bottom: 20px;
}

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

.main-banner .right-image {
  text-align: right;
  position: relative;
  z-index: 20;
}

.main-banner .right-image img {
  max-width: 1300px; /* Increased from 1000px to 1200px */
  width: auto; /* Ensures the image is responsive */
  height: auto; /* Maintains aspect ratio */
  margin-left: -350px;
  margin-bottom: 40px;
}

.main-banner .right-image1 img {
  margin-top: 20px;
  max-width: 800px; /* Increased from 1000px to 1200px */
  width: auto; /* Ensures the image is responsive */
  height: auto; /* Maintains aspect ratio */
  margin-left: -390px;
}

.vid {
  display: flex; /* Use flexbox for alignment */
  justify-content: flex-start; /* Aligns the video to the left */
  padding-right: 10px; /* Adds margin to the right to push the video left */
}

.vid video {
  max-width: 790px; /* Reduced max width */
  width: 390%; /* Ensures the video fills the container */
  height: auto; /* Maintain aspect ratio */
  margin-left: -150px;
  padding-top: 40px;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .vid video {
    max-width: 100%; /* Allow video to fill its container */
  }
}

/* 
---------------------------------------------
inventory page the down one
--------------------------------------------- 
*/

.main-banner1 {
  
  background-repeat: no-repeat;
  background-color: #f4f4f3;
  background-position: center center;
  background-size: cover;
  padding: 0px 0px 0px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner1:after {
  content: '';
  /**background-image: url(../images/slider-left-dec.jpg);**/
  background-color: #f4f4f3;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: -150px;
  width: 100vw;
  height: 797px;
  z-index: -1;
}

.main-banner1:before {
  content: '';
  /**background-image: url(../images/slider-right-dec.jpg);**/
  background-color: #f4f4f3;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  width: 100vw;
  height: 797px;
  z-index: -1;
}

.main-banner1 .left-content {
  margin-right: 15px;
}

.main-banner1 .left-content h6 {
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 700;
  color: #CDA631;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.main-banner1 .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 50px;
  color: #2a2a2a;
  margin-bottom: 0px;
}

.main-banner1 .left-content p {
  margin-bottom: 30px;
  margin-right: 45px;
}

.main-banner1 .right-image {
  text-align: right;
  position: relative;
  z-index: 20;
}

.main-banner1 .right-image img {
  max-width: 1100px; /* Increased from 1000px to 1200px */
  width: auto; /* Ensures the image is responsive */
  height: auto; /* Maintains aspect ratio */
  margin-left: -270px;
}

.main-banner1 .right-image1 img {
  max-width: 800px; /* Increased from 1000px to 1200px */
  width: auto; /* Ensures the image is responsive */
  height: auto; /* Maintains aspect ratio */
  margin-left: -160px;
}

.vid {
  display: flex; /* Use flexbox for alignment */
  justify-content: flex-end; /* Aligns the video to the right */

}

.vid video {
  max-width: 700px; /* Reduced max width */
  width: 390%; /* Ensures the video fills the container */
  height: auto; /* Maintain aspect ratio */
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .vid video {
    max-width: 100%; /* Allow video to fill its container */
  }
}



/*-------------------------------------------
Inventory.html
---------------------------------------------
*/
.main-banner0 {
  top: 15px;
  background-repeat: no-repeat;
  background-color: #f4f4f3;
  background-image: url('../images/back2.png');
  background-position: center center;
  background-size: cover;
  padding: 0px 0px 0px 0px;
  position: relative;
  overflow: hidden;
  padding-bottom: 120px;
}

.main-banner0:after {
  content: '';
  /**background-image: url(../images/slider-left-dec.jpg);**/
  background-color: #f4f4f3;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: -1500px;
  width: 100vw;
  height: 797px;
  z-index: -1;
}

.main-banner0:before {
  content: '';
  /**background-image: url(../images/slider-right-dec.jpg);**/
  background-color: #f4f4f3;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  top: -200px;
  width: 100vw;
  height: 797px;
  z-index: -1;
}

.main-banner0 .left-content {
  margin-right: 15px;
}

.main-banner0 .left-content h6 {
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 700;
  color: #CDA631;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.main-banner0 .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 50px;
  color: #2a2a2a;
  margin-bottom: 0px;
}

.main-banner0 .left-content p {
  margin-bottom: 30px;
  margin-right: 45px;
}

.main-banner0 .right-image {
  text-align: right;
  position: relative;
  z-index: 20;
}

.main-banner0 .right-image img {
  max-width: 1100px; /* Increased from 1000px to 1200px */
  width: auto; /* Ensures the image is responsive */
  height: auto; /* Maintains aspect ratio */
  margin-left: -270px;
}

.main-banner0 .right-image1 img {
  padding-top: 40px;
  max-width: 700px; /* Increased from 1000px to 1200px */
  width: auto; /* Ensures the image is responsive */
  height: auto; /* Maintains aspect ratio */
  margin-left: -70px;
}


/* 
---------------------------------------------
POS Style
--------------------------------------------- 
*/

.main-banner2 {
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-size: cover;
  padding: 0px 0px 0px 0px;
  position: relative;
  overflow: hidden;
  margin-top: 100px;
}

.main-banner2:after {
  content: '';
  /**background-image: url(../images/slider-left-dec.jpg);**/
  background-color: #f4f4f3;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: -1500px;
  width: 100vw;
  height: 797px;
  z-index: -1;
}

.main-banner2:before {
  content: '';
  /**background-image: url(../images/slider-right-dec.jpg);**/
  background-color: #f4f4f3;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  top: -200px;
  width: 100vw;
  height: 797px;
  z-index: -1;
}

.main-banner2 .left-content {
  margin-right: -150px;
}

.main-banner2 .left-content h6 {
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 700;
  color: #CDA631;
  margin-bottom: 15px;
  text-transform: uppercase;
  text-align: right;
}

.main-banner2 .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 50px;
  color: #2a2a2a;
  margin-bottom: 0px;
  text-align: right;
}

.main-banner2 .left-content p {
  margin-bottom: 0;
  margin-right: 0;
  text-align: right;
}

.main-banner2 .right-image {
  text-align: left;
  position: relative;
  z-index: 20;
}

.main-banner2 .right-image img {
  max-width: 1100px; /* Increased from 1000px to 1200px */
  width: auto; /* Ensures the image is responsive */
  height: auto; /* Maintains aspect ratio */
  margin-left: -270px;
}

.main-banner2 .right-image1 img {
  max-width: 800px; /* Increased from 1000px to 1200px */
  width: auto; /* Ensures the image is responsive */
  height: auto; /* Maintains aspect ratio */
  margin-right: 1200px;
}

/* 
---------------------------------------------
Anti-theft Style
--------------------------------------------- 
*/
.main-banner3 {
  background-repeat: no-repeat;
  background-color: #f4f4f3;
  margin-top: 100px;
  background-size: cover;
  padding: 0px 0px 0px 0px;
  position: relative;
  overflow: hidden;
}

.main-banner3:after {
  content: '';
  /**background-image: url(../images/slider-left-dec.jpg);**/
  background-color: #f4f4f3;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: -1500px;
  width: 100vw;
  height: 797px;
  z-index: -1;
}

.main-banner3:before {
  content: '';
  /**background-image: url(../images/slider-right-dec.jpg);**/
  background-color: #f4f4f3;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  top: -200px;
  width: 100vw;
  height: 797px;
  z-index: -1;
}

.main-banner3 .left-content {
  margin-right: 15px;
}

.main-banner3 .left-content h6 {
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 700;
  color: #CDA631;
  margin-bottom: 15px;
  text-transform: uppercase;
}

.main-banner3 .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 50px;
  color: #2a2a2a;
  margin-bottom: 0px;
}

.main-banner3 .left-content p {
  margin-bottom: 30px;
  margin-right: 45px;
}

.main-banner3 .right-image {
  text-align: right;
  position: relative;
  z-index: 20;
}

.main-banner3 .right-image img {
  max-width: 1100px; /* Increased from 1000px to 1200px */
  width: auto; /* Ensures the image is responsive */
  height: auto; /* Maintains aspect ratio */
  margin-left: -270px;
}

.main-banner3 .right-image1 img {
  max-width: 800px; /* Increased from 1000px to 1200px */
  width: auto; /* Ensures the image is responsive */
  height: auto; /* Maintains aspect ratio */
  margin-left: -160px;
}


/* 
---------------------------------------------
em Style
--------------------------------------------- 
*/

#about {
  padding-top: 40px;
  background-color: #ffffff;
}

.about-left-image img {
  margin-right: 45px;
}

.about-right-content p {
  margin-top: 30px;
  margin-bottom: 45px;
  text-align: justify;
}

.skills-content {
  position: relative;
  z-index: 1;
  margin-top: -50px;
  background-color: #f5f5f5;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 110px 0px 50px 0px;
}

.skill-item {
  text-align: center;
}

.progress {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fd6a54;
}

.first-skill-item .progress .progress-bar {
  border-color: #CDA631;
}

.second-skill-item .progress .progress-bar {
  border-color: #726ae3;
}

.third-skill-item .progress .progress-bar {
  border-color: #f58b56;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  text-align: center;
  color: #2a2a2a;
  display: flex;
  width: 100%;
  border-radius: 50%;
  font-size: 35px;
  text-align: center;
  line-height: 25px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}
.progress .progress-value div {
  margin-top: 10px;
}
.progress .progress-value span {
  font-size: 18px;
  text-transform: none;
  color: #afafaf;
  font-weight: 300;
}

/*** 
---------------------------------------------
About2 Style
--------------------------------------------- 
*/

.about2 {
  background-color: #ffffff;
  padding-top: 40px;
  padding-bottom: 10px;
}

.about2-left-image img {
  margin-top: 10px;
  width: 900px;             /* Set a specific width for the image */
  height: auto;             /* Maintain aspect ratio */
  margin-left: -150px;           /* Remove any left margin */
}

.about2-right-content p {
  margin-top: 9px;
  margin-bottom: 20px;
}

.skills2-content {
  position: relative;
  z-index: 1;
  margin-top: -50px;
  background-color: #f5f5f5;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  padding: 0px 0px 0px 0px;
}

.skill2-item {
  text-align: center;
}

.progress2 {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}
.progress2:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.progress2 > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress2 .progress-left {
  left: 0;
}
.progress2 .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fd6a54;
}

.first-skill-item2 .progress .progress-bar {
  border-color: #CDA631;
}

.second-skill-item2 .progress .progress-bar {
  border-color: #726ae3;
}

.third-skill-item2 .progress .progress-bar {
  border-color: #f58b56;
}

.progress2 .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress2 .progress-right {
  right: 0;
}
.progress2 .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress2 .progress-value {
  text-align: center;
  color: #2a2a2a;
  display: flex;
  width: 100%;
  border-radius: 50%;
  font-size: 35px;
  text-align: center;
  line-height: 25px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}
.progress2 .progress-value div {
  margin-top: 10px;
}
.progress2  .progress-value span {
  font-size: 18px;
  text-transform: none;
  color: #afafaf;
  font-weight: 300;
}




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

.services {
  padding-top: 10px;
  padding-bottom: 5px;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  position: relative;
  background-color: #183534;
  display: flex; 
  flex-direction: column; 
  align-items: center; 

}

.services:after {
  content: '';
  /**background-image: url(../images/services-left-dec.jpg);**/
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 786px;
  height: 1217px;
  z-index: 0;
}

.services:before {
  content: '';
  /**background-image: url(../images/services-right-dec.jpg);**/
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 400px;
  width: 161px;
  height: 413px;
  z-index: 0;
}

.services .section-heading {
  text-align: center;
  margin-bottom: 50px;
}

.services .section-heading .line-dec {
  margin: 0 auto;
}

.services .naccs {
  position: relative;
  z-index: 1;
}

.services .icon {
  display: block;
  text-align: center;
  margin: 0px 0 20px 0;
  /*border-top: 2px solid #ccc;*/
  
}

.services .naccs .menu div h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 1000;
  width: 100%;
  text-align: center;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.services .icon img { 
  margin-top: 20px;
  max-width: 70px;
  min-width: 60px;
}


.services .naccs .menu {
  display: flex;                  /* Use flexbox for layout */
  flex-wrap: wrap;               /* Allow items to wrap to the next line */
  justify-content: space-between; /* Space items evenly */
}

.services .naccs .menu div {
  color: #000000;
  width: calc(50% - 10px); /* Adjust width to allow for smaller gaps */
  margin: 5px;             /* Add a small margin to create space between items */
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border-radius: 25px;     /* Keep border radius if needed */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  padding: 5px;            /* Reduced padding for less border effect */
}

.services .naccs .menu div .thumb {
  display: inline-block;
  width: 150px;            /* Set a fixed width */
  height: 150px;           /* Set the same height to create a square */
  padding: 0;              /* Remove padding for a square shape */
  background-color: #ffffff;
  box-sizing: border-box;
  border-radius: 10px;     /* Slightly rounded corners for the thumb */
  text-align: center;      /* Center any text or content inside */
}


.services .naccs .menu div.active {
  box-shadow: 0px 0px 0px rgba(0,0,0,0.1);
}

.services ul.nacc {
  height: 100% !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  /*transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);*/
}

.services ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
 /* transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);*/
}

.services ul.nacc li.active {
  /*transition-delay: 0.3s;*/
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  background-color: #fff;
  border-radius: 15px;
  padding: 80px 120px 50px 120px;
}

.services ul.nacc li {
  width: 100%;
}

.services ul.nacc li .right-image img {
  max-width: 420px;
  float: left ;
}

.services .nacc .thumb h4 {
  color: #2a2a2a;
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  margin-bottom: 25px;
}

.services .nacc .thumb .main-white-button {
  text-align: right;
  margin-top: 40px;
}

.services .nacc .thumb .main-white-button a {
  background-color: #8d99af;
  color: #fff;
}

.services .nacc .thumb .main-white-button a i {
  background-color: #fff;
  color: #8d99af;
}

.services .left-text h4 {
  font-size: 20px;
  font-weight: 700;
  color: #CDA631 !important;
}

.services .left-text p {
  margin-bottom: 30px;
  text-align: justify;
}

.nacc .ticks-list span {
  display: inline-block;
  opacity: 1;
  margin-right: 45px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 400;
}

.services .naccs .menu {
  gap: 0; /* Equal space between boxes */
}
.services .paragraph-text {
    margin-top: 15px;        
    margin-bottom: 5px;      
    margin-left: 10px;
    color: #ffffff;           
    font-size: 16px;         
    text-align: center;  
  }
/**.services .paragraph-text {
  color: #f4f4f3;         
  font-size: 18px;      
  text-align: center;     
  margin: 0 0;       
  line-height: 1;      
  max-width: 600px;       
  padding: 0 0;       
  justify-content: center;
}**/

/*
------------------------------------------
Inventory.html (services)
------------------------------------------
*/
.services1 {
  padding-top: 15px;
  padding-bottom: 50px;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  position: relative;
  background-color: #183534;
  display: flex; 
  flex-direction: column; 
}

.services1:after {
  content: '';
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 786px;
  height: 1217px;
  z-index: 0;
}

.services1:before {
  content: '';
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 400px;
  width: 161px;
  height: 413px;
  z-index: 0;
}

.services1 .section-heading {
  text-align: center;
  margin-bottom: 50px;
}

.services1 .section-heading .line-dec {
  margin: 0 auto;
}

.services1 .naccs {
  position: relative;
  z-index: 1;
}

.services1 .naccs .menu div h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  width: 100%;
}

.services1 .naccs .menu {
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Distribute space evenly */
  margin: 10px 10px; /* Vertical margin for spacing */
  gap: 30px;
}

.services1 .naccs .menu div {
  color: #000000;
  width: calc(100%);
  margin: 0px; /* Remove individual margins */
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  position: relative;
  border-radius: 15px;
}



.services1 ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
}

.services1 .paragraph-text p {
  text-align: justify;
}

.services1 .paragraph-text {
  margin-top: 15px;        
  margin-bottom: 5px;      
  margin-left: 10px;
  color: #ffffff;           
  font-size: 16px;         
  text-align: center;  
}

/* 
---------------------------------------------
Free Quote
--------------------------------------------- 
*/

.free-quote {
  background-image: url(../images/quote-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 120px 0px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 130px;
}

.free-quote .section-heading {
  margin-bottom: 60px;
}

.free-quote .section-heading h6,
.free-quote .section-heading h4 {
  color: #fff;
}

.free-quote .section-heading .line-dec {
  margin: 0 auto;
  background-color: #fff;
}

.free-quote form {
  background-color: #fff;
  display: inline-block;
  width: 100%;
  min-height: 80px;
  border-radius: 40px;
  position: relative;
  z-index: 1;
}

.free-quote form input {
  width: 100%;
  margin-top: 20px;
  margin-left: 30px;
  color: #afafaf;
  font-weight: 400;
  font-size: 15px;
  height: 40px;
  background-color: transparent;
  border-bottom: 1px solid #eee;
  border-top: none;
  border-left: none;
  border-right: none;
  position: relative;
  z-index: 2;
  outline: none;
}

.free-quote form button {
  width: 100%;
  height: 80px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  outline: none;
  border: none;
  margin-left: 30px;
  background-color: #726ae3;
  font-size: 15px;
  color: #fff;
}


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

.our-portfolio {
  padding-top: 20px;
  overflow: hidden;
  position: relative;
  background-color: #e0e0e0;
}

.our-portfolio:before {
  content: '';
  /**background-image: url(../images/portfolio-right-dec.jpg);**/
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 0px;
  width: 414px;
  height: 861px;
  z-index: 1;
}

.our-portfolio:after {
  content: '';
  /**background-image: url(../images/portfolio-left-dec.jpg);**/
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 677px;
  height: 759px;
  z-index: 1;
}

.our-portfolio .section-heading {
  margin-bottom: 30px;
}

.our-portfolio .container-fluid {
  padding-right: 20px;
  padding-left: 20px;
  position: relative;
  z-index: 2;
}
.our-portfolio .item {
  position: relative;
  z-index: 222;
}

.portfolio-item {
  border-radius: 46px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  margin: 15px;
}

.portfolio-item .thumb {
  position: relative;
  border-radius: 50px;
  overflow: hidden; /* Ensure no overflow */
  width: 175; /* Set a fixed width for the thumbnail */
  height: 200px; /* Set a fixed height for the thumbnail */
  margin-bottom: 50px;
}

.portfolio-item:hover .down-content h4,
.portfolio-item:hover .down-content span {
  color: #000000;
}

.portfolio-item .thumb img {
  width: 100%; /* Make the image fill the container */
  height: auto; /* Maintain aspect ratio */
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}


.portfolio-item .down-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 0;
 /* transition: all .3s;*/
}

.portfolio-item .down-content span {
  font-size: 15px;
  color: #afafaf;
  /*transition: all .3s;*/
}

.our-portfolio .owl-nav {
  display: inline-block!important;
  position: absolute;
  top: -80px;
  right: 10%;
  max-width: 1320px;
}

.our-portfolio .owl-nav .owl-next {
  margin-left: 10px;
}

.our-portfolio .owl-nav span {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  font-size: 30px;
  background-color: #CDA631;
  border-radius: 50%;
  color: #fff;
  /*transition: all 0.5s;*/
}

.our-portfolio .owl-nav span:hover {
  color: #000000;
  background-color: #CDA631;
}


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

.blog:before {
  content: '';
  /**background-image: url(../images/blog-left-dec.jpg);**/
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  margin-top: 30px;
  width: 961px;
  height: 1020px;
  z-index: 0;
}

.blog {
  position: relative;
  padding-top: 95px;
}

.blog .section-heading {
    margin-top:20px;
  text-align: center;
  margin-bottom: 30px;
}

.blog .section-heading .line-dec {
  margin: 0 auto;
}

.show-up {
  position: relative;
  z-index: 200;
}

.blog-post {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 25px;
}

.blog-post .thumb img {
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
}

.blog-post .down-content {
  border-bottom-right-radius: 23px;
  border-bottom-left-radius: 23px;
  background-color: #fff;
  padding: 10px;               /* Inner padding for content */
  margin-top: 10px;           /* Space above the down-content */
  margin-bottom: 10px;        /* Space below the down-content */
}

.blog-post .down-content span.category {
  font-size: 15px;
  color: #fff;
  padding: 8px 12px;
  background-color: #CDA631;
  border-radius: 18px;
  display: inline-block;
}

.blog-post .down-content span.date {
  font-size: 15px;
  color: #afafaf;
  text-align: right;
  float: right;
  margin-top: 4px;
}

.blog-post .down-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 30px;
}

.blog-post .down-content p {
  margin-bottom: 10px;
}

.blog-post .down-content span.author {
  font-size: 15px;
  color: #2a2a2a;
}

.blog-post .down-content span.author img {
  max-width: 56px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-post .down-content .border-first-button {
  display: inline-block;
  /**float: right;**/
  
}


.blog-posts {
  margin-left: 30px;
}

.post-item {
  margin-bottom: 62px;
}

.last-post-item {
  margin-bottom: 0px;
}

.post-item .thumb {
  display: inline-block;
  /**float: left;**/
  margin-right: 30px;
}

.post-item .thumb img {
  border-radius: 23px;
  display: inline-block;
}

.post-item .right-content {
  padding-top: 20px;
}

.post-item .right-content span.category {
  font-size: 15px;
  color: #fff;
  padding: 8px 12px;
  background-color: #CDA631;
  border-radius: 18px;
  display: inline-block;
}

.post-item .right-content span.date {
  font-size: 15px;
  color: #afafaf;
  text-align: right;
  float: right;
  margin-top: 4px;
}

.post-item .right-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 30px;
}


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

.contact-us {
  padding-top: 50px;
  background-color: #ffffff;
}

.contact-us .section-heading .line-dec {
  margin: 0 auto;
}

.contact-us .section-heading {
  text-align: center;
  margin-bottom: 30px;
}


form#contact:before {
  /*background-image: url(../images/contact-top-right.png);*/
  position: absolute;
  right: 0;
  top: 0;
  width: 726px;
  height: 78px;
  background-repeat: no-repeat;
  content: '';
  z-index: 1;
}

.contact-dec img {
  max-width: 224px;
  position: absolute;
  right: 25px;
  top: -242px;
}

form#contact:after {
 /* background-image: url(../images/contact-bottom-right.png);*/
  position: absolute;
  right: 0;
  bottom: 0;
  width: 532px;
  height: 106px;
  background-repeat: no-repeat;
  content: '';
  z-index: 1;
}

form#contact {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  position: relative;
  background-color: #fff;
  border-radius: 23px;
  text-align: center;
}

form#contact #map iframe {
  border-top-left-radius: 23px;
  border-bottom-left-radius: 23px;
  margin-bottom: -7px;
  position: relative;
  z-index: 2;
}

.fill-form {
  padding: 80px 60px 80px 30px;
}

.fill-form .info-post {
  margin-bottom: 5px;
}

.fill-form .icon {
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 23px;
  padding: 25px 15px;
}

.fill-form .icon img {
  max-width: 60px;
  display: block;
  margin: 0 auto;
}

.fill-form .icon a {
  margin-top: 15px;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #2a2a2a;
  /*transition: all .3s;*/
}

.fill-form .icon:hover a {
  color: #CDA631;
}

form#contact input {
  width: 100%;
  height: 46px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  border-radius: 23px;
  margin-top: 30px;
}

form#contact input::placeholder {
  color: #aaa;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 200px;
  min-height: 200px;
  height: 200px;
  border-radius: 23px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-top: 30px;
}

form#contact textarea::placeholder {
  color: #aaa;
}

form#contact button {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #000000;
  margin-top: 30px;
  width: 100%;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: 1px solid #CDA631;
  /*transition: all .3s;*/
  outline: none;
}

form#contact button:hover {
  background-color: #CDA631!important;
  color: #fff!important;
}

/* Dropdown styles */
form#contact select {
  width: 100%;
  height: 46px; /* Same height as input */
  background-color: transparent; /* Transparent background */
  border: 1px solid #eee; /* Border style */
  outline: none; /* Remove outline */
  font-size: 15px; /* Font size */
  font-weight: 300; /* Font weight */
  color: #000000; /* Text color */
  padding: 0px 20px; /* Padding */
  border-radius: 23px; /* Rounded corners */
  margin-top: 0px; /* Space above the dropdown */
  -webkit-appearance: none; /* Removes default styling in WebKit browsers */
  -moz-appearance: none; /* Removes default styling in Firefox */
  appearance: none; /* Removes default styling in other browsers */
}




/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/
footer {
  background-color: #CDA631;
  margin-top: 130px;
  padding: 40px 0; /* Increased padding for top and bottom */
}

.footer-content {
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space out sections */
  align-items: flex-start; /* Align items to the top */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  padding: 0 20px; /* Horizontal padding for the container */
}

.footer-left {
  flex: 1; /* Take up equal space */
  text-align: left; /* Align text to the left */
  padding: 10px; /* Padding for left section */
  color: rgb(0, 0, 0);
}

.social-media {
  margin-bottom: 10px; /* Space between icons and links */
}

.social-media a {
  margin-right: 50px; /* Space between social media icons */
}

.social-media img {
  width: 24px; /* Set icon width */
  height: 24px; /* Set icon height */
}

.footer-links {
  list-style: none; /* Remove bullet points */
  padding: 0; /* Remove padding */
  margin: 5px 0; /* Space above and below links */
}

.footer-links a {
  color: #fff; /* Link color */
  text-decoration: none; /* Remove underline */
  /*transition: color 0.5s;*/ /* Smooth color transition */
}

.footer-links a:hover {
  color: #000000; /* Change color on hover */
}

.footer-right {
  flex: 1; /* Take up equal space */
  text-align: right; /* Align text to the right */
  padding: 10px; /* Padding for right section */
  align-self: flex-end; /* Align copyright to the bottom */
  color: rgb(255, 255, 255);
}

.footer-right p {
  color: #fff;
  font-weight: 500;
}
.footer {
  margin: 0;           /* Remove default margin */
  padding: 0;          /* Remove default padding */
}

.container {
  padding: 0;          /* Remove padding from the container */
}
* {
  box-sizing: border-box; /* Apply box-sizing globally */
}

/*---------------------------
price1
---------------------------*/
/* pricing*/
/*pricing-table {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}*/
.package {
  background: #f4f4f3;
  border-radius: 1000PX;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin: 30px;
  padding: 40px;
  flex: 1 1 300px;
  text-align: left;
}
.package h2 {
  color: #CDA631;
  text-align: center;
}
.package ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}
.package ul li {
  padding: 5px 10px;
  position: relative;
  margin-left: 30px;
  text-align: center;
}

.package ul li::after {
  content: ""; /* This creates a pseudo-element */
  display: block; /* Makes it a block element */
  width: 100%; /* Full width of the list item */
  height: 0.5px; /* Thickness of the line */
  background-color: rgba(0, 0, 0, 0.256); /* Color of the line */
  margin-top: 5px; /* Space between text and line */
  position: absolute; /* Positioning relative to the li */
  left: 0; /* Align to the left */
  bottom: 0; /* Align to the bottom */
}

.btn {
  background: #183534;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
}
.btn:hover {
  background: #CDA631;
  color: #ffffff;
  
}
/*----------------------------
pricing table2
------------------------------*/

.pricing-table {
  display: table;
  width: auto;
  max-width: auto;          /* Maximum width of the table */
  margin: 20px auto;        /* Center the table and add top/bottom margin */
  margin-left: auto;
  border-collapse: collapse;
  background-color: #fff;
}

.pricing-table th, .pricing-table td {
  border: 1px solid #ddd;
  padding: 16px;
  text-align: center;
}

.pricing-table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

.price-yes {
  color: #28a745; /* Green for available */
}

.price-no {
  color: #dc3545; /* Red for unavailable */
}
/* Centering the Add ons section */
.add-ons {
  display: flex;                 /* Use flexbox for layout */
  justify-content: center;       /* Center the content */
  width: 70%;                    /* 70% width of the parent container */
  margin: 10px auto;            /* Centered in the page with space around */
  padding: 0 10px;              /* Optional: padding for the sides */
}

.add-ons .package {
  flex: 0 0 calc(50% - 20px);    /* Two packages side by side with margin space */
  margin: 10px;                  /* Margin around packages for spacing */
  box-sizing: border-box;        /* Include padding and border in width calculations */
  background: #f0efef;
  border-radius: 50px;
}
.separator {
  display: flex;
  align-items: center; /* Center the heading vertically */
  margin-top: 20px; /* Space above the separator */
}

.separator::before {
  content: ""; /* Necessary to create the line */
  flex: 1; /* Take up available space to the left of the heading */
  border-top: 0.5px solid #33a0a4; /* Line thickness and color */
  margin-right: 10px; /* Space between line and heading */
}

.separator::after {
  content: ""; /* Necessary to create the line */
  flex: 1; /* Take up available space to the right of the heading */
  border-top: 0.5px solid #33a0a4; /* Line thickness and color */
  margin-left: 10px; /* Space between heading and line */
}

.btn {
  background: #CDA631;
  color: rgb(255, 255, 255);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
}
.btn:hover {
  background: #CDA631;
  color: #000000;
  
}

.additional-info {
  margin-top: 10px; /* Space above the additional info */
  color: #000000; /* Text color for additional info */
  font-size: 14px; /* Font size */
}

.nav {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative; /* Positioning for dropdown */
}

.nav > li {
  position: relative; /* Required for absolute positioning of dropdown */
  text-align: center;
}

.dropdown-toggle {
  margin-top: 7px;
  background: transparent; /* Transparent background */
  border: none; /* No border */
  cursor: pointer; /* Pointer cursor on hover */
  text-align: center; /* Align text to the left */
  font-size: 16px; /* Font size for button */
  font-family: 'Tajawal', 'Tajawal';
  color: rgb(0, 0, 0); /* Text color */
}

.dropdown-toggle:hover {
  color: black;
  text-align: center;
}

/*small circle */
.scroll-to-top {
  position: fixed;
  bottom: 30px; /* Distance from the bottom */
  right: 30px; /* Distance from the right */
  width: 50px; /* Width of the circle */
  height: 50px; /* Height of the circle */
  background-color: #CDA631; /* Circle color */
  color: white; /* Arrow color */
  border-radius: 50%; /* Makes it a circle */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px; /* Size of the arrow */
  text-decoration: none; /* Remove underline */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Shadow for depth */
  /*transition: background-color 0.3s;*/ /* Smooth transition */
  z-index: 1000;
}

.scroll-to-top:hover {
  background-color: #183534;
  color: white;
}

a {
  color: white; 
}

a:hover {
  color: #ffffff; /* Optional: Change color on hover for better visibility */
  text-decoration: underline; /* Optional: Add underline on hover */
}

/* Optional: Additional styles to control overall layout */
form {
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
}

.checkbox-group {
  display: flex;
  flex-direction: column; /* Stack checkboxes vertically */
  gap: 10px;             /* Space between checkboxes */
}

.custom-checkbox {
  display: flex;                          /* Use flexbox for alignment */
  align-items: center;                   /* Center items vertically */
  cursor: pointer;                       /* Change cursor to pointer */
  margin: 0;                             /* No margin */
  margin-left: 20px; 
  margin-top: 10px;
}

.custom-checkbox input {
  display: none;                         /* Hide the default checkbox */
}

.custom-checkbox .checkmark {
  width: 25px;                          /* Small width */
  height: 25px;                         /* Small height */
  border: 2px solid #ccc;               /* Border color */
  border-radius: 2px;                   /* Slightly rounded corners */
  position: relative;                   /* Position for the tick mark */
  margin-right: 8px;                    /* Space between checkbox and label */
  /*transition: background-color 0.3s; */   /* Smooth transition */
}

.custom-checkbox input:checked + .checkmark {
  background-color: blue;                /* Background when checked */
  border-color: blue;                    /* Change border color */
}

.custom-checkbox input:checked + .checkmark::after {
  content: '';                           /* Create a tick mark */
  position: absolute;                    /* Position it within the checkbox */
  left: 9px;                             /* Adjust position */
  top: 2px;                              /* Adjust position */
  width: 5px;                            /* Tick mark width */
  height: 10px;                          /* Tick mark height */
  border: solid white;                   /* Tick mark color */
  border-width: 0 2px 2px 0;            /* Create the tick shape */
  transform: rotate(45deg);              /* Rotate to form a tick */
}

.checkbox-label {
  line-height: 16px;                     /* Center the text vertically */
  color: black;                        /* Text color */
}

/*small icons class for the services sections*/
.small {
  display: flex;                     /* Use flexbox for layout */
  align-items: RIGHT;              /* Center items vertically */
  background-color: #e6e6e6;        /* Light background color */
  border: 0px solid #ffffff;           /* Border styling */
  border-radius: 15px;               /* Rounded corners */
  padding: 0;                    /* Padding inside the box */
  width: 250px; 
  height: 40px;                    /* Fixed width for the box */
   /* Subtle shadow */
  margin: 25px 0; 
}

.icon1 {
  margin-right: 3px;               /* Space between icon and text */
  width: 60px;                      /* Icon width */
  height: 40px;                     /* Icon height */
  margin-bottom: 20px;
}
.icon12 {
  width: 80px;
  height: 80px;
  object-fit: cover; /* Ensures the image covers the area without distortion */
  display: block; /* Make the image a block element */
  margin: 0 auto; /* Center the image horizontally */
  margin-bottom: 10px;
} 

.icon13 {
  width: 70px;
  height: 70px;
  object-fit: cover; /* Ensures the image covers the area without distortion */
  display: block; /* Make the image a block element */
  margin: 0 auto; /* Center the image horizontally */
  margin-bottom: 10px;
} 

.textt {
  margin-top: 9px;
  
  font-size: 9px;                  /* Font size for the text */
  color: #000000;
  text-align: left;                      /* Text color */
}

.containerr {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  background-color: #f4f4f4;
}

/* Flashcard styles */

.flashcard {
  margin-top: 50px;
  margin-bottom: 50px;
  width: 250px;
  height: 200px;
  background-color: #e0e0e0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;

}


.flashcard-image {
  height: 150px;
  background-size: cover;
  background-position: center;
}

.flashcard-content {
  padding: 20px;
}

.flashcard-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.flashcard-description {
  font-size: 14px;
  color: #000000;
  margin-bottom: 20px;
  text-align: center;
}

.dropdown {
  position: relative; /* Position relative for absolute children */
}

.dropdown-list1 {
  text-align: center;
  display: none; /* Initially hide dropdown */
  position: absolute; /* Positioning for dropdown */
  background-color: white; /* Background color */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Shadow effect */
  padding: 10px 0; /* Padding for dropdown */
  z-index: 1000; /* Ensure dropdown is above other content */
}

.dropdown:hover .dropdown-list1 {
  display: block; /* Show dropdown on hover */
  text-align: center;
}

.dropdown-list1 li {
  list-style-type: none; /* Remove bullet points */
  padding: 8px 20px; /* Padding for list items */
  text-align: center; /* Align text to center */
}

.dropdown-list1 li a {
  text-align: center; /* Align text to center */
  text-decoration: none; /* Remove underline from links */
  color: #333; /* Link color */
  display: block; /* Make the entire area clickable */
  width: 100%; /* Ensure the link takes up the full width */
}

.dropdown-list1 li a:hover {
  background-color: #4b4b4b; /* Hover effect */
  text-align: center;
}

.dropdown-list1 {
  pointer-events: auto; /* Allow pointer events */
  text-align: cenetr;
}

.dropdown:hover .dropdown-list1 {
  display: block; /* Show dropdown when hovering over the dropdown */
}

/*----------------------------------
small box 
------------------------------------*/
.sentence {
  margin-top: -30px;
  margin-bottom: 20px;
  font-size: 10px;
  font-weight: 700;
  background-color: #e0e0e0; 
  border: none; /* No initial border */
  border-radius: 5px;
  text-align: left;
  display: inline-block; 
  padding: 2px 5px; 
  /* Remove absolute positioning to allow flexbox to work */
  position: relative; 
}

.sentence-bordered {
  border: var(--border-width, 2px) solid #e0e0e0; /* Default border width and color */
}

/* Optional: Add a class for dynamic color changes */
.border-color {
  border-color: #e0e0e0; /* Default border color */
}

/* Optional: Control border length */
.border-length {
  width: var(--border-length, auto); /* Default width is auto */
}

.flex-container {
  display: flex; /* Use flexbox for horizontal alignment */
  gap: 10px; /* Optional: space between sentences */
}


/*----------------------------------
video
------------------------------------
*/

.video-container {
  position: absolute; /* Position the container absolutely */
  top: 300px; /* Distance from the top */
  right: 500px; /* Distance from the right */
  left: 500px;
  width: 300px; /* Fixed width for the video */
  height: 300px; /* Set height equal to width for a square shape */
  overflow: hidden; /* Hide any overflow */
  z-index: 1000;
}

.video-container video {
  width: 100%;              /* Make video take full width of container */
  height: 100%;             /* Make video take full height of container */
  object-fit: cover;        /* Ensure video covers the container without distortion */
}
/*.i {
  width: 40px;                Set a width for the icon 
  height: 40px;               Set a height for the icon 
  margin-right: 5px;          Space between the icon and the text 
  vertical-align: center;     Align the icon vertically with the text 
} */

/*
---------------------------------
terms and conditions
---------------------------------
*/
.terms-container {
  max-width: 800px;          /* Maximum width for the container */
  margin: 20px auto;         /* Center the container with space above and below */
  padding: 20px;             /* Padding inside the container */
      /* Optional: Border around the container */
       /* Optional: Rounded corners */
  /* Optional: Shadow for depth */
}

.terms-heading {
  text-align: center;        /* Center the heading */
  margin-bottom: 20px;       /* Space below the heading */
}

.terms-list {
  text-align: left;
  list-style-type: disc;     /* Bulleted list */
  padding-left: 10px;        /* Space on the left for the bullets */
}

.terms-list li {
  margin-bottom: 10px;       /* Space between list items */
}
.terms-link {
  color: blue;               /* Set the text color to blue */
  text-decoration: underline; /* Optional: Underline the link for emphasis */
}

.terms-link:hover {
  color: darkblue;          /* Optional: Change color on hover for better UX */
}


.term-link {
  color: #CDA631;               /* Set the text color to blue */
  text-decoration: underline; /* Optional: Underline the link for emphasis */
}

.term-link:hover {
  color: #183534;          /* Optional: Change color on hover for better UX */
}
/*-----------------------------
small section
-------------------------------*/
.contain {
    display: flex; /* Use flexbox to arrange sections in a row */
    justify-content: space-between; /* Optional: space between sections */
    align-items: flex-start; /* Align items to the start */
}

.small-section {
    margin-bottom: 0; /* No space below the section */
    flex: 1; /* Allow sections to grow equally */
    padding: 10px; /* Optional: Add padding for spacing */
}

.small-heading {
    font-size: 15px; /* Small font size for the heading */
    color: #000000; /* Dark color for better visibility */
    font-weight: 700;
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Center align the icon and text */
    margin: 0; /* Remove default margin */
    text-align:center;
}

.iconnn {
  width: 30px; /* Width of the icon */
  height: 30px; /* Height of the icon */
  margin-right: 5px; /* Space between the icon and the heading text */
  margin-top: -10px; /* Adjust this value to push the icon up */
}

.iconnnn {
  width: 30px; /* Width of the icon */
  height: 30px; /* Height of the icon */
  margin-right: 5px; /* Space between the icon and the heading text */
  margin-top: -30px; /* Adjust this value to push the icon up */
}

.small-paragraph {
    font-size: 11px; /* Small font size for the paragraph */
    color: #000000; /* Color for the paragraph */
    font-weight: 500; /* Normal font weight */
    margin-top: -20px; /* Remove space above the paragraph */
    margin-bottom: 0; /* No extra space below the paragraph */
}
.small-paragraphh {
  font-size: 11px; /* Small font size for the paragraph */
  color: #000000; /* Color for the paragraph */
  font-weight: 500; /* Normal font weight */
  margin-top: -20px; /* Remove space above the paragraph */
  margin-bottom: -10px; /* No extra space below the paragraph */
}

/*-----------------------------------
FIRST PAGE VIDEO
------------------------------------*/
.video-section {
  position: relative;
  height: 100vh; /* Full viewport height */
  overflow: hidden; /* Hide overflow if necessary */
}

.video-section video {
  position: absolute; /* Positioning the video absolutely */
  top: 50%; /* Move 50% from the top */
  left: 50%; /* Move 50% from the left */
  width: auto; /* Maintain aspect ratio */
  height: auto; /* Maintain aspect ratio */
  min-width: 100%; /* Ensure it covers the width */
  min-height: 100%; /* Ensure it covers the height */
  transform: translate(-50%, -50%); /* Center the video */
  z-index: -1; /* Video behind content */
  object-fit: cover; /* Ensure video covers the section without distortion */
}

.video-section .content {
  position: relative; /* Keep content above the video */
  z-index: 1; /* Ensure content is above the video */
  text-align: center;
  color: white;
  padding: 2rem;
}

.video-section .content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.video-section .content p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.video-section .content button {
  background-color: #4CAF50;
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2rem;
}

.terms-container {
  max-width: 3000px;
  margin-top: 40px auto;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.terms-heading {
  margin-top: 70px;
  color: #183534; /* Bright color */
  text-align: center;
  font-weight: 700;
  font-size: 2.5em;
  margin-bottom: 20px;
}

.terms-paragraph {
  color: #000000;
  line-height: 1.6;
  margin-bottom: 15px;
  text-align: RIGHT;
}

.terms-subheading {
  color: #CDA631; /* Bright color for subheadings */
  font-size: 1.8em;
  margin-top: 20px;
  text-align: right;
}

.terms-list {
  list-style-type: disc;
  padding-left: 20px;
  text-align: RIGHT;
  margin-bottom: 20px;
}

.terms-list li {
  color: #000000;
  margin-bottom: 10px;
}

.alert {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #4caf50; /* Green background */
  color: white; /* White text */
  padding: 15px;
  border-radius: 5px;
  z-index: 1000; /* Ensure it appears on top */
  transition: opacity 0.5s ease; /* Fade effect */
}
.hidden {
  display: none; /* Initially hidden */
}
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

/*------------------------------
note
-------------------------------*/
.note {
  background-color: #e1e4e6; /* Light blue background */
  border-left: 5px solid #33a0a4; /* Blue left border */
  padding: 15px; /* Padding inside the note */
  margin: 20px auto; /* Center the note with auto margins */
  border-radius: 5px; /* Rounded corners */
  font-family: 'Tajawal', 'Tajawal'; /* Font style */
  font-size: 16px; /* Font size */
  color: #000000; /* Dark text color */
  line-height: 1.0; /* Improved line spacing */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  width: 300px; /* Fixed width for centering */
}
.notee {
  margin: 20px;
  font-family: 'Tajawal', 'Tajawal'; /* Font style */
  font-size: 16px; /* Font size */
  color: red; /* Dark text color */
  text-align: left;
}

.right-aligned {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove default padding */
  margin: 100; /* Remove default margin */
  position: absolute; /* Positioning */
  right: 20px; /* Adjust as needed */
  top: 140px; /* Adjust for vertical positioning */
  z-index: 1000;
}

.border-first-button {
 
  padding: 10px 20px; /* Button padding */
  border-radius: 5px; /* Rounded corners */
}

.border-first-button a {
  color: white; /* Text color */
  text-decoration: none; /* Remove underline */
}

.dropdown2 {
  position: relative; /* Positioning context for the dropdown */
}

/* Dropdown link that triggers the dropdown */
.dropdown2 > a {
  color: #ffffff; /* Text color */
  text-decoration: none; /* Remove underline */
  padding: 10px 15px; /* Padding for the link */
  display: inline-block; /* Inline-block for spacing */
  margin-top: -10px; /* Optional: negative margin to push it up */
}

/* Dropdown menu styles */
.dropdown2 .dropdown-content {
  display: none; /* Hidden by default */
  position: absolute; /* Positioning */
  background-color: #ffffff; /* Background color */
  min-width: 160px; /* Minimum width */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Shadow for depth */
  z-index: 1; /* Ensure it appears above other elements */
  padding: 15px 0; /* Add vertical padding for increased height */
  /* OR */
  /* height: auto; /* Allow height to adjust based on content */ 
}

/* Dropdown items */
.dropdown2 .dropdown-content a {
  color: #000; /* Default text color */
  text-decoration: none; /* Remove underline */
  display: block; /* Block display for full width */
}

/* Change background and text color on hover */


/* Show the dropdown content on hover */
.dropdown2:hover .dropdown-content {
  display: block; /* Show dropdown on hover */
}
.dropdown-icon {
  width: 30px; /* Set the width of the icon */

}

/* Ensure button styling is consistent */
.btn {
  background: #CDA631;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  margin-top: 10px;
}

.btn:hover {
  background: #183534; /* Change on hover */
}

/* Regular text links */
a {
  color: inherit; /* Inherit color from parent */
}

a:hover {
  text-decoration: underline; /* Add underline on hover */
}

/* General button responsiveness */
.border-first-button {
  padding: 10px 20px; /* Button padding */
  border-radius: 5px; /* Rounded corners */
}

/* Dropdown responsive styles */
.dropdown2 .dropdown-list1 {
  min-width: 160px; /* Minimum dropdown width */
}
/*--------------------------
video icon
--------------------------*/
.video-icon {
  display: inline-block;               /* Make it an inline-block for proper spacing */
  width: 20px;                         /* Set the desired width */
  height: 20px;                        /* Set the desired height */
  background-size: contain;            /* Ensure the image scales correctly */
  background-repeat: no-repeat;        /* Prevent the image from repeating */
  margin-left: 5px;                   /* Space between text and icon */
  vertical-align: middle;              /* Align with text */
}

.play-icon {
  width: 20px; /* Set the width of the icon */
  height: 20px; /* Set the height of the icon */
  margin-right: 8px; /* Space between icon and text */
  vertical-align: middle; /* Align icon vertically */
  margin-top: -2px;
  
}
.br1 {
  display: block;          /* Makes the element act like a block */
  text-align: center;     /* Centers the text */
  margin: 20px 0;        /* Adds vertical space above and below */
  line-height: normal;    /* Resets line height for normal spacing */
}
/*-------------------------------
responsive for phones and tablet
-------------------------------*/
@media (max-width: 767px) {
  .main-banner {
    top: 0px;
    height: 800px;
  }
}
@media (max-width: 767px) {
  .header-area .main-nav {
    top: -60px;
  }
}
@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
    top: 0px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 100px;
    margin-left: 10px;
  }
  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
}
@media (max-width: 992px) {
  form#contact {
    overflow: hidden;
  }
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }
  .main-banner .left-content {
    margin-right: 0px;
  }
  .main-banner {
    margin-top: 0px;
    text-align: center;
    padding: 226px 0px 30px 0px;
  }
  .main-banner:before {
    display: none;
  }
  .main-banner .right-image {
    margin: 30px auto 0px auto;
    align-items: left;
    text-align: center;
  }
  .features-item {
    margin-bottom: 45px;
  }
  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }
  .skill-item {
    margin-bottom: 30px;
  }
  .about-left-image img {
    margin-right: 0px;
    margin-bottom: 45px;;
  }
  .about2-left-image img {
    margin-top: 40px;
    margin-left: -135px;
    max-width: 650px;
    height: auto; /* Maintain aspect ratio */
  }
  @media (max-width: 768px) {
    .main-banner0 {
        margin-top: 0; /* Remove margin on smaller screens */
        height: 100vh; /* Full viewport height */
    }
}
  .main-banner0 .right-image1 img {
    padding-top: 40px;
    max-width: 400px; /* Increased from 1000px to 1200px */
    width: auto; /* Ensures the image is responsive */
    height: auto; /* Maintains aspect ratio */
    margin-left: -25px;
}
  .main-banner1 .right-image img {
    padding-top: 40px;
    max-width: 600px; /* Increased from 1000px to 1200px */
    width: auto; /* Ensures the image is responsive */
    height: auto; /* Maintains aspect ratio */
    margin-left: -65px;

  }
  @media (max-width: 600px) {
    .border-first-button {
        flex-direction: column; /* Stack buttons vertically on small screens */
        align-items: left; /* Center align buttons */
    }
}
  .services .naccs .menu div {
    font-size: 15px;
    font-weight: 500;
  }
  .service-item {
    text-align: center;
  }
  .service-item .icon {
    margin-top: 50px;
    margin-bottom: 0px;
  }
  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 70px;
  }
  .our-portfolio .owl-nav {
    display: none !important;
  }
  .contact-info {
    margin-top: 60px;
  }
  form#contact {
    padding: 45px;
  }


@media (max-width: 767px) {
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }
  .main-banner .info-stat {
    margin-top: -250px;
    margin-bottom: 15px;
  }
  .service-item {
    text-align: center;
    padding: 30px;
  }
  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .service-item .right-content {
    display: inline-block;
  }
  .services .naccs .menu div .thumb {
    padding: 5px;
  }
  .services .icon img {
    margin-top: 25px;
  }
  .services ul.nacc li.active {
    padding: 45px;
  }
  .services .naccs .menu div  {
    font-size: 0px;
  }
  .services ul.nacc li .right-image img {
    float: none;
  }
  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
    margin-left: 10px;
  }
  .our-portfolio .section-heading .line-dec {
    margin: 0 auto;
  }
  .our-services .section-heading {
    margin-left: 15px;
  }
  .free-quote form input {
    margin-left: 0px;
    padding: 0px 30px;
  }
  .free-quote form button {
    margin-left: 0px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 0px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 30px;
  }
  .post-item .thumb img {
    max-width: 140px;
  }
  .post-item .right-content p {
    display: none;
  }
  .about-us .about-item {
    margin-top: 15px;
  }
  form#contact {
    padding: 30px;
  }
  img {
    max-width: 100%;  /* Limits the width to the container's width */
    height: auto;     /* Maintains aspect ratio */
}

@media (max-width: 768px) {
  .pricing-table {
    display: block; /* Make the table block to allow scrolling */
    margin: auto; /* Center the table */
}
}
@media (max-width: 600px) {
  .services .paragraph-text {
      margin-left: 5px;   /* Reduce left margin */
      font-size: 14px;    /* Decrease font size for smaller screens */
      margin-top: 10px;   /* Adjust top margin */
      margin-bottom: 5px;  /* Keep bottom margin the same */
  }
}
@media (max-width: 600px) {
  .services1 .paragraph-text {
      margin-left: 5px;   /* Reduce left margin */
      font-size: 14px;    /* Decrease font size for smaller screens */
      margin-top: 10px;   /* Adjust top margin */
      margin-bottom: 5px;  /* Keep bottom margin the same */

  }
}
@media (max-width: 600px) {
  .term-link {
      font-size: 14px; /* Smaller font size on mobile */
      padding: 8px 15px; /* Adjust padding for smaller screens */
  }
}

@media (max-width: 400px) {
  .term-link {
      font-size: 12px; /* Even smaller font size for very small screens */
      padding: 6px 10px; /* Further adjust padding */
  }
}

.term-link:hover {
  background-color: #0056b3; /* Darker shade on hover */
}
@media (max-width: 600px) {
  .info a {
      font-size: 14px; /* Decrease font size on smaller screens */
  }
}

@media (max-width: 400px) {
  .info a {
      font-size: 12px; /* Further decrease font size for very small screens */
  }
}
@media (max-width: 600px) {
  p {
      font-size: 14px; /* Decrease font size on smaller screens */
      margin: 15px 5px; /* Adjust margins for smaller screens */
      padding-left: 10px; /* Adjust left padding for smaller screens */
  }
}

@media (max-width: 400px) {
  p {
      font-size: 12px; /* Further decrease font size for very small screens */
      margin: 10px 5px; /* Adjust margins for very small screens */
      padding-left: 5px; /* Further adjust left padding */
  }
}
@media (max-width: 768px) {
  .page-section {
      top: 40px; /* Reduced margin for smaller screens */
  }
  
  .section-heading h6,
  .section-heading1 h6,
  .section-heading10 h6,
  .section-heading70 h4,
  .section-heading71 h4 {
      font-size: 60px; /* Decrease font size for h6 */
  }
  
  .section-heading h4,
  .section-heading1 h4,
  .section-heading10 h4 {
      font-size: 28px; /* Decrease font size for h4 */
  }

  .section-heading .line-dec,
  .section-heading70 .line-dec,
  .section-heading1 .line-dec {
      width: 40px; /* Adjust line width */
  }
}

@media (max-width: 480px) {
  .page-section {
      margin-top: 40px; /* Further reduced margin */
  }
  
  .section-heading h6,
  .section-heading1 h6,
  .section-heading10 h6,
  .section-heading70 h4,
  .section-heading71 h4 {
      font-size: 24px; /* Further decrease font size for h6 */
  }
  
  .section-heading h4,
  .section-heading1 h4,
  .section-heading10 h4 {
      font-size: 24px; /* Further decrease font size for h4 */
  }

  .section-heading .line-dec,
  .section-heading70 .line-dec,
  .section-heading1 .line-dec {
      width: 30px; /* Further adjust line width */
  }
}

@media (max-width: 768px) {
  .main-banner1 .left-content h6 {
      font-size: 18px; /* Decrease font size for tablets and smaller screens */
      margin-left: 10px;
  }
}

@media (max-width: 480px) {
  .main-banner1 .left-content h6 {
      font-size: 16px; /* Further decrease font size for mobile phones */
      margin-left: 10px;

  }
}
@media (max-width: 768px) {
  .main-banner .right-image img {
    margin-top: -90px;
      max-width: 1100px; /* Limit max width to 90% of the container */
      margin-left: -250px; /* Reset left margin for better alignment */
  }
}

@media (max-width: 480px) {
  .main-banner .right-image img {
      max-width: 700px; /* Full width for small screens */
      margin-left: -150px;
      margin-bottom: 20px; /* Further adjust bottom margin */
  }
}
@media (max-width: 768px) {
  .main-banner0 .left-content h6 {
      font-size: 18px; /* Decrease font size for tablets */
      margin-left: -20px;
  }
}

@media (max-width: 480px) {
  .main-banner0 .left-content h6 {
      margin-top: 20px;
      font-size: 16px; /* Further decrease font size for mobile phones */
      margin-left: 20px;

  }
}
@media (max-width: 768px) {
  h4 {
      font-size: 20px; /* Decrease font size for tablets */
      margin-left: 20px;
  }
}

@media (max-width: 480px) {
  h4 {
      font-size: 18px; /* Further decrease font size for mobile phones */
      margin-left: 20px;
  }
}
@media (max-width: 768px) {
  .header-area {
      height: auto; /* Allow height to adjust */
  }
  
  .header-area .main-nav {
      flex-direction: column; /* Stack items vertically */
  }

  .header-area .main-nav .nav {
      flex-direction: column; /* Stack nav items vertically */
      align-items: flex-start; /* Align items to the left */
      margin-top: 10px; /* Add space above the menu */
  }

  .header-area .main-nav .nav li {
      padding: 10px 0; /* Adjust padding for vertical spacing */
  }

  .header-area .main-nav .nav li a {
      font-size: 14px; /* Decrease font size for smaller screens */
  }

  .header-area .menu-trigger {
      display: block; /* Show menu trigger */
      cursor: pointer; /* Change cursor for the trigger */
  }
}

@media (max-width: 480px) {
  .header-area .main-nav .nav li a {
      font-size: 12px; /* Further decrease font size for mobile */
  }
}

@media (max-width: 768px) {
  .add-ons {
      flex-direction: column;     /* Stack packages vertically */
      width: 90%;                 /* Full width of the parent container */
  }

  .add-ons .package {
      flex: 0 0 100%;             /* Make each package full width */
      margin: 10px 0;            /* Margin around packages for vertical spacing */
  }
}
@media (max-width: 768px) {
  .note {
    width: 90%; /* Set width to 90% of the viewport */
    max-width: 400px; /* Optional: maximum width for larger screens */
    margin: 10px auto; /* Center the note with top/bottom margin */
  }
}
@media (max-width: 768px) {
  .portfolio-item .thumb {
    width: auto; /* Set width to 100% of the parent container */
    height: auto; /* Maintain aspect ratio by setting height to auto */
    max-width: auto; /* Optional: maximum width for larger screens */
  }
}
@media (max-width: 768px) {
  .main-banner0 .left-content h6 {
    font-size: 18px; /* Reduce font size for smaller screens */
    padding-top: 60px;
  }
}

@media (max-width: 480px) {
  .main-banner0 .left-content h6 {
    font-size: 16px; /* Further reduce font size for very small screens */
    margin-bottom: 8px; /* Further decrease bottom margin */
  }
}
@media (max-width: 768px) {
  .icon12 {
    width: 60px; /* Reduce width for smaller screens */
    height: 60px; /* Reduce height for smaller screens */
  }
}

@media (max-width: 480px) {
  .icon12 {
    width: 50px; /* Further reduce width for very small screens */
    height: 50px; /* Further reduce height for very small screens */
  }
}
@media (max-width: 768px) {
  .services1 {
    padding-bottom: 30px; /* Reduce bottom padding */
  }

  .services1 .section-heading {
    margin-bottom: 30px; /* Reduce margin */
  }

  .services1 .naccs .menu {
    flex-direction: column; /* Stack menu items vertically */
    gap: 20px; /* Reduce gap between items */
  }

  .services1 .naccs .menu div {
    width: 90%; /* Reduce width for smaller screens */
    margin: 0 auto; /* Center menu items */
    font-size: 18px; /* Decrease font size */
  }

  .services1 .naccs .menu div h4 {
    font-size: 22px; /* Decrease heading font size */
    
  }

  .services1 .paragraph-text {
    font-size: 14px; /* Decrease paragraph font size */
  }
}

@media (max-width: 480px) {
  .services1 .naccs .menu div {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    height: 100%; /* Ensure the div takes up enough height for centering */
    font-size: 16px; /* Adjust font size for very small screens */
    text-align: center; /* Center text */
  }
  .services1 .naccs .menu div h4 {
    font-size: 14px; /* Heading font size */
    text-align: center; /* Center text */
    margin: 0; /* Reset margins */
    padding: 10px 0; /* Add padding for vertical spacing */
  }
  .services1 .paragraph-text {
    font-size: 12px; /* Further decrease paragraph font size */
  }
}
@media (max-width: 768px) {
  .section-heading h6 {
    font-size: 14px; /* Reduce font size for smaller screens */
    top: -100px;
    margin-bottom: 12px; /* Adjust bottom margin */
    margin-left: 10px;
   
  }

  .section-heading h4 {
    font-size: 28px; /* Reduce font size for smaller screens */
    margin-left: 10px

  }
}

@media (max-width: 480px) {
  .section-heading h6 {
    font-size: 12px; /* Further reduce font size for very small screens */
    margin-bottom: 10px; /* Further adjust bottom margin */
    margin-left: 10px

  }

  .section-heading h4 {
    font-size: 24px; /* Further reduce font size for very small screens */
    margin-left: 10px

  }
}
@media (max-width: 768px) {
  .section-heading70 h4 {
    padding: 20px;
    margin-bottom: -30px;
    font-size: 28px; /* Reduce font size */
  }
}

@media (max-width: 480px) {
  .section-heading70 h4 {
    padding: 20px;
    margin-bottom: -30px;
    font-size: 24px; /* Further reduce font size */
  }
}

@media (max-width: 768px) {
  .border-first-button {
      flex-direction: column; /* Stack buttons vertically */
      gap: 10px; /* Reduce gap between buttons */
  }
}
@media (max-width: 768px) {
  .flex-container {
    flex-direction: vertical; /* Stack items vertically on smaller screens */
    gap: 15px; /* Increase gap between items */
    margin-left: 10px;
  }
}

@media (max-width: 480px) {
  .flex-container {
    gap: 10px; /* Adjust gap for very small screens */
  }
}
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column; /* Stack sections vertically */
    align-items: center; /* Center items */
  }

  .footer-left,
  .footer-right {
    text-align: center; /* Center text for smaller screens */
    padding: 20px 0; /* Adjust padding */
    width: 100%; /* Full width for both sections */
  }

  .social-media a {
    margin-right: 20px; /* Reduce space between icons */
  }
}

@media (max-width: 480px) {
  .social-media a {
    margin-right: 10px; /* Further reduce space on very small screens */
  }

  .footer-links a {
    font-size: 12px; /* Reduce font size for links */
  }

  .footer-right p {
    font-size: 14px; /* Adjust copyright text size */
  }
}
@media (max-width: 768px) {
  .styled-dropdown {
      display: block; /* Show on mobile screens */
  }
}