/* Fonts */
:root {
  --default-font: "Inter", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --heading-font: "Playfair Display",  "Cinzel", "Libre Baskerville", sans-serif;
  --nav-font: "Lato",  sans-serif;
}
/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #394047; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #c98d31; /* ebc324 Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --hover-color: #eb981c; /* ebc324 Applied to main navmenu links when they are hovered */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #eb981c; /* ebc324 Applied to main navmenu links when they are hovered */
  --nav-active-color: #c98d31; /* 9c7945  ebc324 Applied to main navmenu links when they are active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #eb981c; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

.light-background {--background-color: #f9f9f9; --surface-color: #ffffff;}

.dark-background {
  --background-color: #262626; 
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

body {color: var(--default-color); background-color: var(--background-color); font-family: var(--default-font);}

a {color: var(--accent-color); text-decoration: none; transition: 0.3s;}

a:hover {color: var(--hover-color); text-decoration: none;}

h1,h2,h3,h4,h5,h6 {color: var(--heading-color); font-family: var(--heading-font);}

h3,h4, h5 {font-size: 1.5rem;}

.btn-dark {padding: 14px 28px;}

.section {padding: 80px 0;}

.card {border: 1px solid #eee; transition: all .2s ease;}

.card:hover {transform: translateY(-5px);}

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

.box {width: 100px; height: 100px; background-color:var(--accent-color); text-align: center; line-height: 100px; }

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {--background-color: rgba(0, 0, 0, 0); --default-color: #ffffff; --heading-color: #ffffff; color: var(--default-color); background-color: var(--background-color); padding: 15px 0; transition: all 0.5s; z-index: 997;}

.header .logo {line-height: 1;}

.header .logo img {max-height: 130px; margin-right: 8px;}

.header .logo h1 {font-size: 30px; margin: 0; font-weight: 700; color: var(--heading-color);}

.scrolled .header {box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {--background-color: rgba(0, 0, 0, 0.85);}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {padding: 0;}

  .navmenu ul {margin: 0; padding: 0; display: flex; list-style: none; align-items: center;}

  .navmenu li {position: relative;}

  .navmenu a, .navmenu a:focus {color: var(--nav-color); padding: 18px 15px; font-size: 18px; font-family: var(--heading-font); text-transform: uppercase; font-weight: 500; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; transition: 0.3s; }

  .navmenu a i, .navmenu a:focus i {font-size: 12px; line-height: 0; margin-left: 5px; transition: 0.3s;}

  .navmenu li:last-child a {padding-right: 0;}

  .navmenu li:hover>a {color: var(--nav-hover-color);}
  
  .navmenu .active, .navmenu .active:focus {color: var(--nav-active-color);}

  .navmenu .dropdown ul {margin: 0; padding: 10px 0; background: var(--nav-dropdown-background-color); display: block; position: absolute; visibility: hidden; left: 14px; top: 130%; opacity: 0; transition: 0.3s; border-radius: 4px; z-index: 99; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);}

  .navmenu .dropdown ul li {min-width: 200px;}

  .navmenu .dropdown ul a {padding: 10px 20px; font-size: 15px; text-transform: none; color: var(--nav-dropdown-color);}

  .navmenu .dropdown ul a i {font-size: 12px; }

  .navmenu .dropdown ul a:hover, .navmenu .dropdown ul .active:hover, .navmenu .dropdown ul li:hover>a {color: var(--nav-dropdown-hover-color); }

  .navmenu .dropdown:hover>ul {opacity: 1; top: 100%; visibility: visible; }

  .navmenu .dropdown .dropdown ul {top: 0; left: -90%; visibility: hidden;}

  .navmenu .dropdown .dropdown:hover>ul {opacity: 1; top: 0; left: -100%; visibility: visible;}
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {

  .mobile-nav-toggle {color: var(--nav-color); font-size: 28px; line-height: 0; margin-right: 10px; cursor: pointer; transition: color 0.3s;}

  .navmenu {padding: 0; z-index: 9997;}

  .navmenu ul {display: none; list-style: none; position: absolute; inset: 60px 20px 20px 20px; padding: 10px 0; margin: 0; border-radius: 6px; background-color: var(--nav-mobile-background-color); overflow-y: auto; transition: 0.3s; z-index: 9998; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1); }

  .navmenu a, .navmenu a:focus {color: var(--nav-dropdown-color); padding: 10px 20px; font-family: var(--nav-font); font-size: 17px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; transition: 0.3s; }

  .navmenu a i, .navmenu a:focus i {font-size: 12px; line-height: 0; margin-left: 5px;  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.3s; background-color: color-mix(in srgb, var(--accent-color), transparent 90%);}

  .navmenu a i:hover, .navmenu a:focus i:hover {background-color: var(--accent-color); color: var(--contrast-color);}

  .navmenu a:hover, .navmenu .active, .navmenu .active:focus {color: var(--nav-dropdown-hover-color); }

  .navmenu .active i, .navmenu .active:focus i {background-color: var(--accent-color); color: var(--contrast-color); transform: rotate(180deg); }

  .navmenu .dropdown ul {position: static; display: none; z-index: 99; padding: 10px 0; margin: 10px 20px; background-color: var(--nav-dropdown-background-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); box-shadow: none; transition: all 0.5s ease-in-out;}

  .navmenu .dropdown ul ul {background-color: var(--hover-color);}

  .navmenu .dropdown>.dropdown-active {display: block; background-color: var(--hover-color);}

  .mobile-nav-active {overflow: hidden;}

  .mobile-nav-active .mobile-nav-toggle {color: #fff; position: absolute; font-size: 32px; top: 15px; right: 15px; margin-right: 0; z-index: 9999;}

  .mobile-nav-active .navmenu {position: fixed; overflow: hidden; inset: 0; background: var(--hover-color); transition: 0.3s;}

  .mobile-nav-active .navmenu>ul {display: block;}
}
.dropdown-item.active, .dropdown-item:active {
  text-decoration: none;
  color: var(--contrast-color);
  background-color: var(--nav-hover-color);
}
.dropdown-item.active:focus {
  color: var(--contrast-color);
}
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {color: var(--default-color); background-color: var(--background-color); font-size: 14px; position: relative;}

.footer .footer-top {padding-top: 50px; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);}

.footer .footer-about .logo {line-height: 1; margin-bottom: 15px; padding-left: 25px;}

.footer .footer-about .logo img {max-height: 100px; max-width: 100px; margin-right: 6px;}

.footer .footer-about .logo span {font-size: 26px; font-weight: 700; letter-spacing: 1px; font-family: var(--heading-font); color: var(--heading-color);}

.footer .footer-about p {font-size: 14px; font-family: var(--heading-font);}

.footer .social-links a {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%); font-size: 16px; color: color-mix(in srgb, var(--default-color), transparent 30%); margin-right: 10px; transition: 0.3s;}

.footer .social-links a:hover {color: var(--accent-color); border-color: var(--accent-color);}

.footer h4 {font-size: 16px; font-weight: bold; position: relative; padding-bottom: 12px;}

.footer .footer-links {margin-bottom: 30px;}

.footer .footer-links ul {list-style: none; padding: 0; margin: 0; }

.footer .footer-links ul i {padding-right: 2px; font-size: 12px; line-height: 0;}

.footer .footer-links ul li {padding: 10px 0; display: flex; align-items: center;}

.footer .footer-links ul li:first-child {padding-top: 0;}

.footer .footer-links ul a {color: color-mix(in srgb, var(--default-color), transparent 30%); display: inline-block; line-height: 1;}

.footer .footer-links ul a:hover {color: var(--accent-color);}

.footer .footer-contact p {margin-bottom: 5px;}

.footer .copyright {padding: 25px 0; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);}

.footer .copyright p {margin-bottom: 0;}

.footer .credits {margin-top: 6px; font-size: 13px;}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {position: fixed; inset: 0; z-index: 999999; overflow: hidden; background: var(--background-color); transition: all 0.6s ease-out;}

#preloader:before {content: ""; position: fixed; top: calc(50% - 30px); left: calc(50% - 30px); border: 6px solid #ffffff; border-color: var(--accent-color) transparent var(--accent-color) transparent; border-radius: 50%; width: 60px; height: 60px; animation: animate-preloader 1.5s linear infinite;}

@keyframes animate-preloader {
  0% {transform: rotate(0deg);}

  100% {transform: rotate(360deg);}
}
/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {position: fixed; visibility: hidden; opacity: 0; right: 15px; bottom: 15px; z-index: 99999; background-color: var(--accent-color);
  width: 40px; height: 40px; border-radius: 4px; transition: all 0.4s;}

.scroll-top i {font-size: 24px; color: var(--contrast-color); line-height: 0;}

.scroll-top.active {visibility: visible; opacity: 1;}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {transition-delay: 0 !important; }
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {padding: 0;}

.hero .carousel {width: 100%; min-height: 100vh; padding: 0; margin: 0; background-color: var(--background-color); position: relative;}

.hero img {position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; z-index: 1;}

.hero .carousel-item {position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden;}

.hero .carousel-item:before {content: ""; background: color-mix(in srgb, var(--background-color), transparent 30%); position: absolute; inset: 0; z-index: 2;}

.hero .carousel-item::before {content: ""; background-color: color-mix(in srgb, var(--background-color), transparent 30%); position: absolute; inset: 0;}

.hero .carousel-container {position: absolute; inset: 90px 64px 64px 64px; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 3;}

.hero h1 {margin-bottom: 30px; font-size: 48px; font-weight: 700; font-family: Playfair Display, Libre Baskerville, Cinzel; animation: fadeInDown 1s both;}

.hero h2 {margin-bottom: 25px; font-size: 1.75rem; font-weight: 700; font-family: Inter, Lato, Helvetica Neue; animation: fadeInDown 1s both;}

@media (max-width: 768px) {
  .hero h1 {font-size: 30px;}
  .hero h2 {font-size: 20px;}
}

.hero p {animation: fadeInDown 1s both 0.2s;}

@media (min-width: 1024px) {

  .hero h2,
  .hero p {max-width: 60%;}
}

.hero .btn-get-started, .btn-get-started {color: var(--contrast-color); background: var(--accent-color); font-family: var(--heading-font); font-weight: 500; font-size: 15px; letter-spacing: 1px; display: inline-block; padding: 8px 32px; border-radius: 4px; transition: 0.4s; margin: 10px; animation: fadeInUp 1s both 0.4s;}

.hero .carousel-control-prev,
.hero .carousel-control-next {width: 10%; transition: 0.3s; opacity: 0.5;}

.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus {opacity: 0.5;}

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {opacity: 0.9;}

@media (min-width: 1024px) {

  .hero .carousel-control-prev,
  .hero .carousel-control-next {width: 5%;}
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {background: none; font-size: 32px; line-height: 1;}

.hero .carousel-indicators {list-style: none;}

.hero .carousel-indicators li {cursor: pointer;}

@keyframes fadeInUp {
  from {opacity: 0; transform: translate3d(0, 100%, 0);}

  to {opacity: 1; transform: translate3d(0, 0, 0);}
}

@keyframes fadeInDown {
  from {opacity: 0; transform: translate3d(0, -100%, 0);}

  to {opacity: 1; transform: translate3d(0, 0, 0); }
}
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {background: color-mix(in srgb, var(--default-color), transparent 96%); padding: 30px;}

.contact .info-item i {font-size: 38px; line-height: 0; color: var(--accent-color);}

.contact .info-item h3 {font-size: 20px; font-weight: 700; margin: 20px 0 10px 0;}

.contact .info-item p {padding: 0; line-height: 24px; font-size: 14px; margin-bottom: 0;}

.contact .php-email-form {background: color-mix(in srgb, var(--default-color), transparent 96%); padding: 30px; height: 100%;}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {font-size: 14px; padding: 10px 15px; box-shadow: none; border-radius: 0; color: var(--default-color); background-color: color-mix(in srgb, var(--background-color), transparent 50%); border-color: color-mix(in srgb, var(--default-color), transparent 80%);}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {background: var(--accent-color); color: var(--contrast-color); border: 0; padding: 10px 30px; transition: 0.4s; border-radius: 4px;}

.contact .php-email-form button[type=submit]:hover {background: color-mix(in srgb, var(--accent-color), transparent 20%);}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {padding: 0; margin: 0 auto 20px auto; list-style: none; text-align: center;}

.portfolio .portfolio-filters li {cursor: pointer; display: inline-block; padding: 0; font-size: 18px; font-weight: 400; margin: 0 10px; line-height: 1; margin-bottom: 5px; transition: all 0.3s ease-in-out;}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {color: var(--accent-color);}

.portfolio .portfolio-filters li:first-child {margin-left: 0;}

.portfolio .portfolio-filters li:last-child {margin-right: 0;}

@media (max-width: 575px) {.portfolio .portfolio-filters li {font-size: 14px; margin: 0 5px; }}

.portfolio .portfolio-content {position: relative; overflow: hidden;}

.portfolio .portfolio-content img {transition: 0.3s;}

.portfolio .portfolio-content .portfolio-info {opacity: 0; position: absolute; inset: 0; z-index: 3; transition: all ease-in-out 0.3s; background: rgba(0, 0, 0, 0.6); padding: 15px;}

.portfolio .portfolio-content .portfolio-info h4 {font-size: 14px; padding: 5px 10px; font-weight: 400; color: #ffffff; display: inline-block; background-color: var(--accent-color);}

.portfolio .portfolio-content .portfolio-info p {position: absolute; bottom: 10px; text-align: center; display: inline-block; left: 0; right: 0; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.8);}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link { position: absolute; left: calc(50% - 40px); font-size: 26px; top: calc(50% - 14px); color: #fff; transition: 0.3s; line-height: 1.2;}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {color: var(--accent-color);}

.portfolio .portfolio-content .portfolio-info .details-link {left: 50%; font-size: 34px; line-height: 0;}

.portfolio .portfolio-content:hoverhover .portfolio-info {opacity: 1;}

.portfolio .portfolio-content:hover img {transform: scale(1.1);}
/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {padding: 100px 0; position: relative; clip-path: inset(0);}

.call-to-action img {position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; z-index: 1;}

.call-to-action:before {content: ""; background: color-mix(in srgb, var(--background-color), transparent 30%); position: absolute; inset: 0; z-index: 2;}

.call-to-action .container {position: relative; z-index: 3;}

.call-to-action h3 {font-size: 28px; font-weight: 700; color: var(--default-color);}

.call-to-action p {color: var(--default-color);}

.call-to-action .cta-btn {font-family: var(--heading-font); font-weight: 500; font-size: 16px; letter-spacing: 1px; display: inline-block; padding: 12px 40px; border-radius: 5px; transition: 0.5s; margin: 10px; border: 2px solid var(--contrast-color); color: var(--contrast-color);}

.call-to-action .cta-btn:hover {background: var(--accent-color); border: 2px solid var(--accent-color);}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-item, .services .services-item, .why .why-item {background-color: var(--surface-color); box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1); padding: 30px; position: relative; height: 100%;}

.testimonials .testimonial-item .testimonial-img {width: 90px; border-radius: 50px; border: 6px solid var(--background-color); float: left; margin: 0 10px 0 0;}

.testimonials .testimonial-item h3 {font-size: 18px; font-weight: bold; margin: 10px 0 5px 0;}

.testimonials .testimonial-item h4 {font-size: 14px; color: color-mix(in srgb, var(--default-color), transparent 20%); margin: 0;}

.testimonials .testimonial-item .stars {margin: 10px 0;}

.testimonials .testimonial-item .stars i {color: #ffc107; margin: 0 1px;}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {color: color-mix(in srgb, var(--accent-color), transparent 50%); font-size: 26px; line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {display: inline-block; left: -5px; position: relative;}

.testimonials .testimonial-item .quote-icon-right {display: inline-block; right: -5px; position: relative; top: 10px; transform: scale(-1, -1);}

.testimonials .testimonial-item p {font-style: italic; margin: 15px 0 0 0; padding: 0;}
/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {text-align: center; padding-bottom: 30px; position: relative;}

.section-title h1 {font-size: 32px; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 20px; position: relative; padding-top:60px}

.section-title h2 {font-size: 32px; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 20px; position: relative;}

.section-title div {color: var(--heading-color); margin: 10px 0 0 0; font-size: 28px; font-weight: 500; font-family: var(--heading-font);}

.section-title div .description-title {color: var(--accent-color);}
/*--------------------------------------------------------------
# Custom
--------------------------------------------------------------*/
.hr_menu {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

.scroll-top:hover {background-color: var(--hover-color); color: var(--contrast-color);}

.btn-paged {color: var(--contrast-color); background: var(--accent-color); font-family: var(--heading-font); font-weight: 500; font-size: 15px; letter-spacing: 1px; display: inline-block; padding: 8px 32px; border-radius: 4px; transition: 0.4s; margin: 10px; animation: fadeInUp 1s both 0.4s;}

.btn-paged:hover {color: var(--contrast-color); background: var(--hover-color); border-color: var(--hover-color)}


.btn-paged_selected {color: var(--contrast-color); background: var(--hover-color); font-family: var(--heading-font); font-weight: 500; font-size: 15px; letter-spacing: 1px; display: inline-block; padding: 8px 32px; border-radius: 4px; transition: 0.4s; margin: 10px; animation: fadeInUp 1s both 0.4s;}

.btn-paged_selected:hover {color: var(--contrast-color); background: var(--accent-color); border-color: var(--hover-color)}


.new-page {padding-top: 120px;}

.hero .btn-get-started:hover, .btn-get-started:hover  {background: var(--hover-color);}

section {padding: 60px 0; padding-top: 60px; overflow: hidden; position: relative;}

.img-process {max-width: 50%; height: auto;}

.number-page{color: var(--accent-color); font-size: 1.4em; margin: .3em;}

.number-page:hover, .number-page-selected {color: var(--background-color); background-color: var(--accent-color); padding: .5em; font-size: 1.4em;}

.img-web-dev {max-width: 100%;}

@media (max-width: 500px) {.img-web-dev {max-width: 90%;}}

.icon {font-size: 50px; color:#c98d31; margin: 0 10px;}

.h4{line-height: inherit;}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/

.about .info-item i {font-size: 48px; color: var(--hover-color); margin-right: 20px; line-height: 0;}

.about .contact-item i {font-size: 38px; color: var(--hover-color); margin-right: 20px; line-height: 0;}

.about .icon-box, .services .icon-box {margin-bottom: 20px; padding: 30px; border-radius: 6px; background: #f1eded; transition: 0.3s; transition-duration: 0.3s; transition-timing-function: ease; transition-delay: 0s;}

.about .icon-box:hover, .services .service-selected {background: var(--hover-color); color: var(--contrast-color);}

.about .icon-box i {float: left; color: #252525; font-size: 40px; line-height: 0;}

.about .icon-box h4 {margin-left: 70px; font-weight: 500; margin-bottom: 15px; font-size: 1.75rem;}

.about .icon-box h5 {font-weight: 500; margin-bottom: 15px; font-size: 1.75rem;}

.service-ul {margin-left: 20px;}

.section-title-services {
  text-align: center;
  padding-bottom: 30px;
  position: relative;
}
.section-title-services h1 {
  font-size: 32px;
  font-weight: bold;
  text-transform: capitalize;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  padding-top: 60px;
}