/* GANTRY5 DEVELOPMENT MODE ENABLED.
 *
 * WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost!
 *
 * For more information on modifying CSS, please read:
 *
 * http://docs.gantry.org/gantry5/configure/styles
 * http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
 */

@charset "UTF-8";
html {
  font-size: 16px !important;
}
#g-drawer {
  padding: 1.5rem 0;
  background: #f1f1f1;
  color: #000000;
}
@media print {
  #g-drawer {
    background: #f1f1f1 !important;
    color: #000 !important;
  }
}
#g-top {
  background-color: rgba(24, 103, 169, 0.31);
  color: #ffffff;
}
#g-top a {
  color: rgba(201, 226, 247, 0.31);
}
#g-top a:hover {
  color: #ffffff;
}
#g-top h1, #g-top h2, #g-top h3, #g-top h4, #g-top h5, #g-top h6, #g-top strong {
  color: #ffffff;
}
#g-top .button {
  background: #ef6c00;
  color: #ffffff;
}
#g-top .button:hover {
  background: #ff780a;
}
#g-top .button:active {
  background: #d66000;
}
@media print {
  #g-top {
    background: #fff !important;
    color: #000 !important;
  }
}
#g-copyright {
  background-color: #142d53;
  color: #ffffff;
}
#g-copyright a {
  color: #85a9e1;
}
#g-copyright a:hover {
  color: #ffffff;
}
#g-copyright h1, #g-copyright h2, #g-copyright h3, #g-copyright h4, #g-copyright h5, #g-copyright h6, #g-copyright strong {
  color: #ffffff;
}
#g-copyright .button {
  background: #ef6c00;
  color: #ffffff;
}
#g-copyright .button:hover {
  background: #ff780a;
}
#g-copyright .button:active {
  background: #d66000;
}
@media print {
  #g-copyright {
    background: #fff !important;
    color: #000 !important;
  }
}
#g-bottom {
  background-color: #0f4069;
  color: #ffffff;
}
#g-bottom a {
  color: #89c0ee;
}
#g-bottom a:hover {
  color: #ffffff;
}
#g-bottom h1, #g-bottom h2, #g-bottom h3, #g-bottom h4, #g-bottom h5, #g-bottom h6, #g-bottom strong {
  color: #ffffff;
}
#g-bottom .button {
  background: #ef6c00;
  color: #ffffff;
}
#g-bottom .button:hover {
  background: #ff780a;
}
#g-bottom .button:active {
  background: #d66000;
}
@media print {
  #g-bottom {
    background: #fff !important;
    color: #000 !important;
  }
}
#g-mainbottom {
  background-color: rgba(32, 134, 224, 0.71);
  color: #ffffff;
}
#g-mainbottom a {
  color: rgba(255, 255, 255, 0.71);
}
#g-mainbottom a:hover {
  color: #ffffff;
}
#g-mainbottom h1, #g-mainbottom h2, #g-mainbottom h3, #g-mainbottom h4, #g-mainbottom h5, #g-mainbottom h6, #g-mainbottom strong {
  color: #ffffff;
}
#g-mainbottom .button {
  background: #ef6c00;
  color: #ffffff;
}
#g-mainbottom .button:hover {
  background: #ff780a;
}
#g-mainbottom .button:active {
  background: #d66000;
}
@media print {
  #g-mainbottom {
    background: #fff !important;
    color: #000 !important;
  }
}
#g-maintop {
  background-color: #a97018;
  color: #ffffff;
}
#g-maintop a {
  color: #f7e5c9;
}
#g-maintop a:hover {
  color: #ffffff;
}
#g-maintop h1, #g-maintop h2, #g-maintop h3, #g-maintop h4, #g-maintop h5, #g-maintop h6, #g-maintop strong {
  color: #ffffff;
}
#g-maintop .button {
  background: #ef6c00;
  color: #ffffff;
}
#g-maintop .button:hover {
  background: #ff780a;
}
#g-maintop .button:active {
  background: #d66000;
}
@media print {
  #g-maintop {
    background: #fff !important;
    color: #000 !important;
  }
}
#g-utility {
  background-color: rgba(20, 87, 143, 0.29);
  color: #ffffff;
}
#g-utility a {
  color: rgba(174, 212, 244, 0.29);
}
#g-utility a:hover {
  color: #ffffff;
}
#g-utility h1, #g-utility h2, #g-utility h3, #g-utility h4, #g-utility h5, #g-utility h6, #g-utility strong {
  color: #ffffff;
}
#g-utility .button {
  background: #ef6c00;
  color: #ffffff;
}
#g-utility .button:hover {
  background: #ff780a;
}
#g-utility .button:active {
  background: #d66000;
}
@media print {
  #g-utility {
    background: #fff !important;
    color: #000 !important;
  }
}
.g-recaptcha.form-control {
  height: auto !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 0px !important;
}
.input-group {
  margin-bottom: 15px;
}
.outline-_body_only.modal.no-modal {
  display: block;
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 0;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  top: auto;
}
/* --------------------------

           HOME

---------------------------- */
/* --------------------------

          CONTENT

---------------------------- */
p {
  font-size: 18px !important;
}
blockquote {
  margin: 15px 0 15px 10px !important;
}
blockquote p {
  font-size: 30px !important;
}
a, .btn, input[type="submit"], input[type="button"], button {
  -ms-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  -moz-transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
}
a:hover, a:focus, .btn:hover, .btn:focus, input[type="submit"]:hover, input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:focus, button:hover, button:focus {
  text-decoration: none;
}
*:hover, *:focus {
  outline: none;
}
/*#g-main {
  font-size: $p-size;
  li {
    padding: $li-padding !important;
    color: $li-color !important;
    font-size: $li-size !important;
  }
  a {
    color: $a !important;
    &:hover {
      color: $a-hover !important;
    }
  }
  h1 {
    @include heading($h1-size, $h1-color);
  }
  h2 {
    @include heading($h2-size, $h2-color);
  }
  h3 {
    @include heading($h3-size, $h3-color);
  }
  h4 {
    @include heading($h4-size, $h4-color);
  }
}*/
body {
  font-family: "Open Sans", "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
}
.gantry-logo img {
  width: 18rem;
}
.joomrocks_navigation .g-content.g-particle {
  padding: 0;
}
.joomrocks_navigation ul li {
  text-transform: uppercase;
}
#g-header .g-main-nav .g-dropdown {
  background: #0044ff;
}
#g-header {
  border-bottom: 0.6rem solid #3b99d3;
}
#g-navigation {
  border-bottom: 0.6rem solid #3b99d3;
}
#g-navigation .g-content, #g-navigation p {
  padding: 0;
  margin: 0;
}
h1, h2, h3, h4, h5 {
  color: #3b99d3;
}
.imgborder {
  border: 1px solid #cccccc;
}
.portfolioimgborder {
  border: 1px solid #cccccc;
}
/*weblink css*/
.tags {
  width: 100%;
}
.inline li {
  list-style: none;
  height: auto !important;
  float: left;
}
.list-condensed li {
  height: 4rem;
}
/*pagination*/
.pagination-list li {
  list-style: none;
  float: left;
  width: 2rem;
}
.g-offcanvas-toggle {
  color: #000000;
}
.g-main-nav .g-toplevel > li > .g-menu-item-container {
  padding: 1.2rem 0.938rem;
}
/* Menu Hover Styles for Gantry Template */
.g-main-nav .g-menu-item-container:hover, .g-main-nav .g-menu-item-container:focus {
  background-color: #0d6efd;
  /* Change to your desired hover background color */
  color: #fff;
  /* Change text color on hover */
  transition: background-color 0.3s ease;
}
.g-main-nav .g-menu-item-container:hover .g-menu-item-title {
  color: #fff;
  /* Ensures text also changes color on hover */
}
/* Optional: change sub-menu (dropdown) hover as well */
.g-main-nav .g-sublevel .g-menu-item-container:hover {
  background-color: #0d6efd;
  color: #fff;
}
#g-header .g-main-nav .g-sublevel > li > .g-menu-item-container {
  color: #ffffff !important;
  /* Change to your desired text color */
}
.gradient-bg {
  background: linear-gradient(135deg, #00f0ff, #0044ff);
  color: #ffffff;
}
.glow-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background: #00ffcc;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 0 2px #00ffcc, 0 0 4px #00ffcc;
  transition: all 0.3s ease;
}
.glow-btn:hover {
  background: #00ccff;
  color: #fff;
  box-shadow: 0 0 6px #00ccff, 0 0 12px #00ccff;
}
.description-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.description-row p {
  flex: 1;
  margin: 0;
}
.joomla-banner-right {
  max-width: 500px;
  background: #509A3D;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
  font-family: "Segoe UI", sans-serif;
  color: #333;
}
.banner-heading {
  font-size: 38px;
  font-weight: 700;
  color: #D7212C;
  margin-bottom: 10px;
  background: #ffff08;
  padding: 10px 0 10px 0;
  margin-top: 5px;
}
.banner-subtext {
  font-size: 16px;
  margin-bottom: 20px;
  color: #ffffff;
}
.cta-points {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}
.cta-points li {
  margin-bottom: 8px;
  font-size: 15px;
  color: #222;
}
.home-page-banner-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: #F7941D;
  padding: 20px;
}
.home-page-banner-form h2 {
  color: white;
  font-size: 3rem;
  padding-bottom: 20px;
}
.joomla-lead-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.joomla-lead-form .formRed {
  background-color: yellow;
}
.joomla-lead-form .formError {
  color: yellow;
}
.joomla-lead-form input, .joomla-lead-form textarea {
  padding: 10px;
  border: 1px solid #0D69B0;
  border-radius: 8px;
  font-size: 14px;
  background: #F7941D;
  transition: border 0.3s ease;
  width: calc(100% - 20px);
  /* Adjust width to account for padding */
  color: yellow;
  font-weight: bold;
}
.joomla-lead-form input::placeholder, .joomla-lead-form textarea::placeholder {
  color: yellow;
  opacity: 1;
  /* Ensures full visibility in some browsers */
}
.joomla-lead-form input:focus, .joomla-lead-form textarea:focus {
  border-color: #00c9ff;
  outline: none;
}
.cta-button {
  background: linear-gradient(45deg, #0e4a5a, #1115de);
  color: #fff;
  font-weight: 600;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 0 10px #18a1c5;
  transition: background 0.3s ease, transform 0.2s ease;
}
.cta-button:hover {
  transform: scale(1.03);
  box-shadow: 0 0 20px #00c9ff;
}
.trusted-badge {
  margin-top: 15px;
  font-size: 14px;
  color: #2e7d32;
  background: #e8f5e9;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
}
.banner-features {
  list-style: none;
  padding: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
.banner-features li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
  color: #ffffff;
  text-align: left;
}
.banner-features li::before {
  content: "✔️";
  position: absolute;
  left: 0;
  color: #2ecc71;
  font-size: 18px;
}
.why-joomla-block .lead {
  font-size: 2.5rem !important;
}
.why-joomla-block .section-title {
  font-size: 4rem;
  color: #ee710f;
  /* Joomla green tone */
}
.why-joomla-block ul li {
  margin-bottom: 10px;
  font-size: 1.4rem;
  color: #333;
}
.why-joomla-block img {
  max-width: 90%;
  border: 4px solid #e0e0e0;
  color: #ee710f;
  /* Joomla green tone */
}
.success-stories-section .section-title {
  font-size: 3rem;
  font-weight: 700;
  color: #0D69B0;
}
.success-stories-section .section-subtitle {
  font-size: 2rem !important;
  color: #0D69B0;
}
.success-stories-section .card {
  border-radius: 12px;
  transition: all 0.3s ease;
}
.success-stories-section .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.orangecard {
  background: #F7941D;
  padding: 1.8rem;
}
.greencard {
  background: #509A3D;
  padding: 1.8rem;
}
.redcard {
  background: #D7212C;
  padding: 1.8rem;
}
.success-stories-section .card-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #f2ff0a;
  margin-bottom: 10px;
}
.success-stories-section p {
  color: #fff;
  font-size: 1.2rem;
}
.success-stories-section p strong {
  color: #fff;
  font-size: 1.3rem;
}
.joomla-services .section-title {
  font-size: 3.5rem;
  color: #D7212C;
}
.joomla-services .section-subtitle {
  font-size: 1.5rem !important;
  color: #666;
}
.joomla-services .border {
  border: #509A3D 3px solid !important;
  transition: 0.3s ease;
  transform: translateY(-5px);
  margin-bottom: 15px;
}
.joomla-services .border:hover {
  border: #D7212C 3px solid !important;
  transition: 0.3s ease;
  transform: translateY(-5px);
}
.joomla-services h5 {
  font-size: 1.4rem !important;
}
.roadmap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin-top: 20px;
}
.roadmap .step {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s;
}
.roadmap .step:hover {
  transform: translateY(-5px);
}
.roadmap .icon {
  font-size: 32px;
  display: block;
  margin-bottom: 10px;
}
.roadmap h4 {
  font-size: 18px;
  margin: 10px 0 5px;
}
.roadmap p {
  font-size: 14px;
  color: #555;
}
/* Section wrapper */
.why-migrate {
  background: #f9fafc;
  padding: 80px 20px;
}
/* Container */
.why-migrate .container {
  max-width: 1200px;
  margin: 0 auto;
}
/* Section header */
.section-head {
  text-align: center;
  margin-bottom: 50px;
}
.section-head .eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: #0073aa;
  /* Joomla blue tone */
  text-transform: uppercase;
  letter-spacing: 1px;
}
.section-head h2 {
  font-size: 32px;
  margin: 10px 0;
  color: #222;
}
.section-head .lead {
  font-size: 16px;
  color: #555;
  max-width: 700px;
  margin: 0 auto;
}
/* Benefits grid */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0 0 50px;
}
.benefit {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.benefit:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}
.benefit .icon {
  font-size: 36px;
  margin-bottom: 12px;
  display: inline-block;
}
.benefit h3 {
  font-size: 18px;
  color: #222;
  margin-bottom: 10px;
}
.benefit p {
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}
/* CTA */
.cta-wrap {
  text-align: center;
}
.cta-wrap .btn {
  background: #0073aa;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.3s ease;
}
.cta-wrap .btn:hover {
  background: #005f88;
}
.cta-wrap .cta-note {
  font-size: 14px;
  color: #666;
  margin-top: 12px;
}
/* Migration Process Block */
.migration-process {
  padding: 60px 20px;
  background: #f8f9fc;
  text-align: center;
}
.migration-process .section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: #222;
}
.migration-process .section-subtitle {
  font-size: 1rem;
  color: #555;
  max-width: 750px;
  margin: 0 auto 40px;
  line-height: 1.6;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}
.step {
  background: #fff;
  padding: 25px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.step-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: #0073aa;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}
.step p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}
/* Section base */
.why-custom-extension {
  background: #f9fafc;
  padding: 60px 20px;
}
.why-custom-extension .container {
  max-width: 1200px;
  margin: 0 auto;
}
/* Header */
.why-custom-extension .section-header {
  text-align: center;
  margin-bottom: 40px;
}
.why-custom-extension .section-header h2 {
  font-size: 32px;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}
.why-custom-extension .section-header p {
  color: #666;
  font-size: 16px;
  max-width: 700px;
  margin: 0 auto;
}
/* Grid layout */
.why-custom-extension .reasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
/* Reason box */
.why-custom-extension .reason-box {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.why-custom-extension .reason-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
.why-custom-extension .reason-box h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222;
}
.why-custom-extension .reason-box p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}
.extension-process {
  padding: 60px 20px;
  background: #f9f9f9;
}
.extension-process .section-title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 40px;
  color: #333;
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}
.process-step {
  background: #fff;
  border-radius: 12px;
  padding: 25px 20px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.process-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.step-number {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #0077cc;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  margin: 0 auto 15px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.process-step h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #222;
}
.process-step p {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
}
/* Block 3: Types of Custom Extensions */
.custom-extensions-types {
  padding: 60px 20px;
  background: #f8f9fc;
  text-align: center;
}
.custom-extensions-types .section-title {
  font-size: 32px;
  margin-bottom: 40px;
  font-weight: 700;
  color: #222;
}
.extensions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}
.extension-card {
  background: #fff;
  padding: 25px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease-in-out;
  text-align: left;
}
.extension-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #0073aa;
  /* Joomla blue */
}
.extension-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
}
.extension-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
/* Block 4: Why Work With Us */
.why-work-with-us {
  padding: 60px 20px;
  background: #f9fafc;
  text-align: center;
}
.why-work-with-us .section-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: #333;
}
.why-work-with-us .section-subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 40px;
}
.why-work-with-us .reasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}
.why-work-with-us .reason-card {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}
.why-work-with-us .reason-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.why-work-with-us .reason-card h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: #222;
}
.why-work-with-us .reason-card p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
}
/*# sourceMappingURL=custom_14.css.map */