@charset "UTF-8";
/*
  
  [TABLE OF CONTENTS] 
  1. Fonts
  2. Variables
  3. Reset
  4. Heading Tags
  5. Buttons
  6. Sections
  7. Data Display Boxes
  8. Forms
  9. Preloader
  10. Site Header
  11. Site Banner
  12. About
  13. General Features
  14. Extended Features
  15. Pricing Plans
  16. Trusted By
  17. Testimonials
  18. Blogs
  19. App Download
  20. Contact
  21. Footer
  22. Back To Top

*/

/* ==========================================================================================
   -- Fonts --
========================================================================================== */

/* DONE */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
    --font-family: "Poppins", sans-serif;
}

/* ==========================================================================================
   -- Variables -- 
========================================================================================== */

/* DONE */

:root {
     --theme-gradient: linear-gradient(90deg, #aee0ea, #7bc2d4, #5fa6b7);
    --theme-color2: #000000;
    --theme-color3: #44A5BD;
    --text-color: #555555;
    --grey-color: #e2dada;
    --white: #ffffff;
    --black: #000000;
    --placehoder-color: #b7b7b7;
    --h1-font-size: 56px;
    --h2-font-size: 40px;
    --h3-font-size: 32px;
    --h4-font-size: 24px;
    --h5-font-size: 20px;
    --h6-font-size: 18px;
    --border-radius-xxl: 32px;
    --border-radius-lg: 24px;
    --border-radius-md: 16px;
    --border-radius-sm: 8px;
    --section-pading: 100px;
}

@media only screen and (max-width: 768px) {
    :root {
        --h1-font-size: 40px;
        --h2-font-size: 32px;
        --h3-font-size: 24px;
        --h4-font-size: 20px;
        --h5-font-size: 18px;
        --h6-font-size: 16px;
        --section-pading: 75px;
    }
}

/* ==========================================================================================
   -- Reset -- 
========================================================================================== */

/* DONE */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

img {
    max-width: 100%;
}

:active,
:focus {
    outline: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--black);
    margin-bottom: 16px;
    font-weight: 600;
}

table p {
    margin-bottom: 0;
}

p {
    margin: 0;
}

a {
    color: var(--black);
    text-decoration: none;
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}

a:hover {
    text-decoration: underline;
    color: var(--theme-color2);
}

a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    outline: none;
}

a img {
    border: none;
}

pre,
ul,
ol,
dl,
dd,
blockquote,
address,
table,
fieldset {
    margin-bottom: 10px;
}

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

iframe {
    border: none !important;
}

.site-bg {
    background: var(--theme-color1);
}

/* ==========================================================================================
   -- Heading Tags --
========================================================================================== */

/* DONE */

h1 {
    font-size: var(--h1-font-size);
}

h2 {
    font-size: var(--h2-font-size);
}

h3 {
    font-size: var(--h3-font-size);
}

h4 {
    font-size: var(--h4-font-size);
}

h5 {
    font-size: var(--h5-font-size);
}

h6 {
    font-size: var(--h6-font-size);
}

/* ==========================================================================================
   -- Buttons --
========================================================================================== */

/* DONE */

.button {
    background: var(--theme-color3) !important;
    border: none;
    color: var(--white);
    border-radius: 50px;
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}

.anchor-button {
    display: inline-flex;
    border-radius: 50px;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}

.anchor-button.primary {
    background: var(--theme-color3) !important;
    color: var(--white);
}

.anchor-button.secondary {
    background: var(--white);
    color: var(--theme-color3) !important;
}

.button:hover,
.anchor-button:hover {
    background: var(--theme-color2);
    color: var(--white);
}

.button-lg {
    padding: 16px 32px;
}

.button-sm {
    padding: 8px 16px;
}

/* ==========================================================================================
   -- Sections --
========================================================================================== */

.sp-t {
    padding: 100px;
}

.sp-tb {
    padding-top: var(--section-pading);
    padding-bottom: var(--section-pading);
}

.sp-b {
    padding-bottom: var(--section-pading);
}

.section-heading.white h1,
.section-heading.white h2,
.section-heading.white h3,
.section-heading.white h4,
.section-heading.white h5,
.section-heading.white h6 {
    color: var(--white);
}

.sub-heading {
    color: var(--theme-color3)  !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-size: 22px  !important;
}

.section-heading.white .sub-heading {
    color: var(--white);
}

/* ==========================================================================================
   -- Data Display Boxes --
========================================================================================== */

.iconbox-primary .item-icon .las,
.iconbox-primary .item-icon .lar,
.iconbox-primary .item-icon .lab {
    font-size: 64px;
    color: var(--theme-color1);
}

.iconbox-primary h3,
.iconbox-primary h4 {
    margin-bottom: 16px;
}

.iconbox-secondary {
    display: flex;
}

.iconbox-secondary .item-icon .las {
    color: var(--theme-color1);
    font-size: 48px;
}

.iconbox-secondary h3,
.iconbox-secondary h4 {
    margin-bottom: 8px;
}

.iconbox-list .item-icon .las,
.iconbox-list .item-icon .lar,
.iconbox-list .item-icon .lab {
    font-size: 24px;
    color: var(--theme-color1);
}

/* ==========================================================================================
   -- Forms --
========================================================================================== */

input[type="text"] {
    width: 100%;
    padding: 16px 24px;
    border: 1px solid var(--grey-color);
    border-radius: 50px;
}

textarea {
    width: 100%;
    padding: 16px 24px;
    border: 1px solid var(--grey-color);
    border-radius: 32px;
}

/* ==========================================================================================
   -- Preloader --
========================================================================================== */

.preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--theme-color3) !important;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ripple div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
}

@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

/* ==========================================================================================
   -- Site Header --
========================================================================================== */
.site-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    padding: 32px 0;
    z-index: 1000;
    transition: ease all 0.3s;
}

.site-logo img {
    width: 100px;
}

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

.header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.site-navigation ul li {
    display: inline-flex;
}

.site-navigation ul li a {
    padding: 8px 16px;
    color: var(--white);
}

.site-navigation ul li a:hover {
    color: var(--theme-color2);
}

.site-header.sticky-header .site-navigation ul li a:hover {
    color: var(--theme-color2);
}

.site-mobile-header {
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 0;
    left: 0;
    padding: 32px 0;
    transition: ease all 0.3s;
}

.site-header.sticky-header,
.site-mobile-header.sticky-header {
    padding: 16px 0;
    background: var(--theme-color3) !important;
}

.mobile-nav-toggle .las {
    color: var(--white);
    font-size: 32px;
}

.mobile-navigation-wrap {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100%;
  background: #44A5BD !important;
  z-index: 1050;
  transition: right 0.3s ease-in-out;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
}

.mobile-navigation-wrap.show {
  right: 0;
}

.mobile-nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.mobile-nav ul li {
  margin-bottom: 1rem;
}

.mobile-nav ul li a {
  color: #fff;
  font-size: 1.2rem;
  text-decoration: none;
  font-weight: 500;
  display: block;
}

.mobile-nav ul li a:hover {
  text-decoration: underline;
}
/* ==========================================================================================
   -- Site Header --
========================================================================================== */

.site-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    padding: 32px 0;
    z-index: 1000;
    transition: ease all 0.3s;
}

.site-logo img {
    width: 70px;
}

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

.header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.site-navigation ul li {
    display: inline-flex;
}

.site-navigation ul li a {
    padding: 8px 16px;
    color: var(--white);
}

.site-navigation ul li a:hover {
    color: var(--theme-color2);
}

.site-header.sticky-header .site-navigation ul li a:hover {
    color: var(--theme-color2);
}

.site-mobile-header {
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 0;
    left: 0;
    padding: 32px 0;
    transition: ease all 0.3s;
}

.site-header.sticky-header,
.site-mobile-header.sticky-header {
    padding: 16px 0;
    background: var(--theme-gradient) !important;
}


.mobile-nav-toggle  {
    color: var(--white);
    font-size: 32px;
}

.mobile-navigation-wrap {
    position: fixed;
    width: 320px;
    right: -100%;
    top: 0;
    z-index: 1000;
    background: var(--theme-color3) !important;
    height: 100%;
    transition: ease all 0.3s;
}

.mobile-navigation-wrap .nav-header {
    display: flex;
    justify-content: end;
}

.mobile-navigation-wrap .nav-header {
    color: var(--white);
    font-size: 32px;
}

.mobile-navigation-wrap .mobile-nav ul li {
    display: flex;
    margin-bottom: 16px;
}

.mobile-navigation-wrap .mobile-nav ul li a {
    color: var(--white);
}

.mobile-navigation-wrap.show {
    right: 0;
}

/* ==========================================================================================
   -- Site Banner --
========================================================================================== */

.site-banner {
   
    width: 100%;
    min-height: 100vh;
    
    background-image: url(..///images/banner4.png)   !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex !important;
    align-items: center;
    
  
}



banner-heading h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}

.banner-description p {
  font-size: 1.25rem;
  margin-top: 1rem;
  line-height: 1.6;
}

@media (max-width: 992px) {
  .banner-heading h1 {
    font-size: 2.2rem;
  }
  .banner-description p {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .banner-heading {
    text-align: center;
  }
  .banner-heading h1 {
    font-size: 1.8rem;
  }
  .banner-description p {
    font-size: 0.95rem;
  }
}
/* ==========================================================================================
   -- About -- 
========================================================================================== */

.ceo-message-wrap {
    background-color: var(--theme-color3) !important;
    color: var(--white);
    border-radius: var(--border-radius-xxl);
}

.ceo-image img {
    border-radius: var(--border-radius-md);
}

.ceo-message-text {
    font-size: 22px !important;
    font-weight: normal;
}
/* ==========================================================================================
   -- Pricing Plans --
========================================================================================== */

.pricing-plan-single {
    border: 1px solid var(--grey-color);
    border-radius: var(--border-radius-xxl);
}

.pricing-plan-single.plan-professional {
    color: #fff;
    background: var(--theme-color1);
    border-color: var(--theme-color1);
}

.pricing-plan-single.plan-professional .plan-heading h3 {
    color: var(--white);
}

.pricing-plan-single .anchor-button {
    width: 100%;
}

.pricing-plan-single .plan-cost .price {
    font-size: var(--h2-font-size);
    font-weight: 600;
    color: var(--theme-color2);
}

.pricing-plan-single.plan-professional .plan-cost .price {
    color: var(--white);
}

/* ==========================================================================================
   -- Trusted By --
========================================================================================== */

.third-party-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.third-party-logo img {
    width: auto;
    height: 54px;
    object-fit: contain;
}

/* ==========================================================================================
 -- Testimonials --
========================================================================================== */

.testimonials-box {
    background: var(--theme-color1);
    color: var(--white);
    border-radius: var(--border-radius-xxl);
}

.testimonials-box .slick-dots li button:before {
    color: var(--white);
}

.testie-quote .las {
    font-size: 88px;
}

.testimonial-slider .testimonie-text {
    font-size: 24px;
    font-weight: 400;
}

.testimonie-meta .avatar {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50px;
}

.testimonie-meta .avatar img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
}

.testimonials-box .slick-dots {
    bottom: -35px;
}

.testimonie-thumb-slider img {
    border-radius: var(--border-radius-md);
}

/* ==========================================================================================
   -- Blogs --
========================================================================================== */

.blog-thumb-image img {
    border-radius: var(--border-radius-md);
}

.blog-title a {
    color: var(--theme-color2);
}

.blog-title a:hover {
    color: var(--theme-color1);
}





/* ==========================================================================================
     -- Back To Top --
  ========================================================================================== */

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    text-align: center;
    background: var(--theme-color3) !important;
    color: var(--white);
    border-radius: var(--border-radius-xxl);
    padding: 8px;
    transition: all 0.3s;
    cursor: pointer;
    display: none;
}

.back-to-top:hover {
    background: var(--theme-color2);
}

.back-to-top .icon-top {
    font-size: 36px;
}

.back-to-top .top-text {
    font-size: 12px;
}




.fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
  opacity: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anchor-button {
  border: none;
}


.anchor-button.primary {
  border: none;
}


.anchor-button.primary {
  border: none;
  border-radius: 4px;
  outline: none;
}




#serviceDetails {
  display: none;
  background: linear-gradient(135deg, #f5f7ff, #eef1fb); /* soft gradient */
  color: #222;
  padding: 30px;
  border-radius: 12px;
  margin-top: 30px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

#serviceDetails::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: var(--theme-color3) !important; /* accent purple bar */
  border-radius: 12px 0 0 12px;
}

#serviceDetails h3 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: var(--theme-color3) !important;
}

#serviceDetails p {
  line-height: 1.7;
  font-size: 1rem;
  color: #555;
  margin: 0;
}

.mb-3 {
    background-color: var(--theme-color3);
    border-radius: 5px;
    padding: 15px;
}

.mb-3 h2 {
    color: var(--white);
}



.ceo-image img {
 
    width: 400px;
    height: 300px;
    object-fit: cover;
}


.bg-lightblue {
    background: linear-gradient(135deg, #44A5BD, #357f97);
    color: #fff;
}





.our-values-simple {
  background: var(--white);
  padding: 60px 0;
}

.our-values-simple .section-title {
  font-size: 2.2rem;
  font-weight: 600;
  color: #000000;
}

.our-values-simple .section-subtitle {
  font-size: 1rem;
  color: #777;
  margin-bottom: 30px;
}

.our-values-simple .value-item {
  background: #f1f1f1;
  padding: 20px;
  border-radius: 8px;
  transition: box-shadow 0.3s ease;
}

.our-values-simple .value-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.our-values-simple .value-icon {
  font-size: 2.5rem;
  color: #44A5BD;
  margin-bottom: 10px;
}

.our-values-simple h5 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #000000;
  margin-bottom: 10px;
}

.our-values-simple p {
  font-size: 0.95rem;
  color: #000000;
  line-height: 1.6;
}



.circle-image-wrap {
    display: inline-block;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    width: 500px;
    height: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #44A5BD, #7BC2D4);
    padding: 8px; /* creates a nice ring */
}

.circle-image-wrap img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    font-size: 20px;
    background-color: #e9f5f8;
    color: #44A5BD;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.footer-social .social-icon:hover {
    background-color: #44A5BD;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}




.about-section {
  background: linear-gradient(135deg, #f8fdfe, #e9f6f9);
  padding: 60px 0;
  border-top: 4px solid #44A5BD;
}

.about-section .section-heading .sub-heading p {
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #44A5BD;
  font-weight: 600;
  font-size: 14px;
}

.about-section .section-heading .heading-title h2 {
  font-size: 32px;
  color: #333;
  font-weight: 700;
}

.about-section .section-heading .heading-description p {
  font-size: 22px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
}

.about-section .ceo-image img {
  max-width: 100%;
  border-radius: 50%;
 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.308);
}

.about-section .ceo-message-text p {
  color: #444;
  font-size: 22px;
  line-height: 1.7;
  margin-bottom: 15px;
  font-weight: normal;
}

.about-section .ceo-message-text p strong {
  color: #44A5BD;
}




.mission-vision {
  padding: 60px 0;
}

.mission-vision .heading-title h2 {
  font-size: 2rem;
  font-weight: 600;
  color: #333;
}

.mission-vision .iconbox-secondary {
  gap: 1rem;
}

.mission-vision .item-icon {
  font-size: 2rem;
  color: #44A5BD;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mission-vision .item-content h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.mission-vision .item-content p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
}

.circle-image-wrap img {
  max-width: 80%;
  border-radius: 50%;
  border: 4px solid #44A5BD;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ✅ Mobile responsiveness */
@media (max-width: 991px) {
  .mission-vision .row.align-items-center {
    flex-direction: column-reverse;
    text-align: center;
  }

  .mission-vision .col-lg-5,
  .mission-vision .col-lg-7 {
    max-width: 100%;
    flex: 0 0 100%;
  }

 

  .mission-vision .iconbox-secondary {
    flex-direction: column;
    text-align: center;
  }

  .circle-image-wrap img {
    max-width: 60%;
    margin: 20px auto;
  }
}



/* modal */

.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  animation: fadeIn 0.3s ease forwards;
  padding: 20px;
}

.modal-content {
  background-color: #fff;
  margin: auto;
  padding: 30px 20px;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  text-align: center;
  position: relative;
  animation: slideDown 0.4s ease forwards;

  /* Center the modal */
  top: 50%;
  transform: translateY(-50%);
}

.modal-content h3 {
  color: #44A5BD;
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.modal-content p {
  color: #555;
  line-height: 1.6;
  font-size: 1rem;
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
}

.close:hover {
  color: #333;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

/* Mobile improvements */
@media (max-width: 576px) {
  .modal-content {
    padding: 20px 15px;
    max-width: 95%;
  }

  .modal-content h3 {
    font-size: 1.25rem;
  }

  .modal-content p {
    font-size: 0.9rem;
  }
}