/**
* Template Name: Day
* Template URL: https://bootstrapmade.com/day-multipurpose-html-template-for-free/
* Updated: May 18 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors */
:root {
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #ffffff;

  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: #444444;

  /* Heading Color - This color is used for titles, headings and secondary elements. */
  --heading-color: #191919;

  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
  --accent-color: #19184D;

  /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
  --contrast-color: #ffffff;
}
.policycolor{
  color:#71b280;
}

.paras{
  text-align: justify;
}
/* Nav Menu Colors */
:root {
  /* Nav Color - This is the default color of the main navmenu links. */
  --nav-color: #ffffff;

  /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
  --nav-hover-color: #19184D;

  /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
  --nav-dropdown-background-color: #ffffff;

  /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-color: #212529;

  /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --nav-dropdown-hover-color: #19184D;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
html{
  scroll-behavior: smooth;
}

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

a {
  color: #014AEE;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color:#014AEE;
  text-decoration: none;
}

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

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: #242424;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --contrast-color: #ffffff;
  color: var(--default-color);
  transition: all 0.5s;
  z-index: 997;
  
}

.header .topbar {
  
  height: 40px;
  padding: 0;
  font-size: 14px;
  transition: all 0.5s;
}

.header .topbar .contact-info i {
  font-style: normal;
  color: white;
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
  padding-left: 5px;
  color: var(--default-color);
}

@media (max-width: 575px) {

  .header .topbar .contact-info i a,
  .header .topbar .contact-info i span {
    font-size: 13px;
  }
}

.header .topbar .contact-info i a {
  line-height: 0;
  transition: 0.3s;
}

.header .topbar .contact-info i a:hover {
  color: var(--contrast-color);
  text-decoration: underline;
}

.header .topbar .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  line-height: 0;
  transition: 0.3s;
  margin-left: 20px;
}

.header .topbar .social-links a:hover {
  color: var(--accent-color);
}

.header .branding {
 padding-block: 20px;
}


.header .logo .bgss{
  border-radius: 50%;
  background-color: white;
}

.header .logo .bgss img {
  width:100px;
  height: auto;
  padding: 20px;
  position: relative;

}


/*-- Mobile navbar --*/

.nav-bar ul {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
@media (max-width: 992px) {
  .nav-bar ul {
      display: none;
      flex-direction: column;
      width: 100%;
      background-color: #343a40; /* Match the bg-dark class */
      position: absolute;
      top: 60px; /* Adjust based on your nav height */
      left: 0;
      z-index: 1000;
  }
  .nav-bar ul.show {
      display: flex;
  }
  .nav-bar ul li {
      width: 100%;
      text-align: center;
      padding: 10px 0;
  }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@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:black;
    padding: 20px 15px;
    margin-left: 2px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    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:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--contrast-color);
  
    padding:10px;
    border-radius: 10px;;
  }

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

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

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    margin: 0;
    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(--contrast-color);
    background-color: var(--nav-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;
  }
}

.navbar-container{
  padding: 120px 0;
  position: relative;
  clip-path: inset(0);
}

 .logo-container .logo-img{
  padding-top:500px;
  width: 100%;
} 

/* Mobile Navigation */
@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;
   display: none;
  }

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

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color) !important;
    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;
color: var(--contrast-color);
    background-color: color-mix(in srgb, var(--accent-color), transparent 10%) !important;
  }

  .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(--accent-color) !important;
  }

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

  .navmenu .dropdown ul {
   
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
    position: unset !important;
  }

  .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 {
  
    overflow: hidden;
    inset: 0;
    /* background: rgba(33, 37, 41, 0.8); */
    transition: 0.3s;
    padding: 20px;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
    height: 70vh;
    overflow-y: scroll;
  }
  .mobile-nav-active .navmenu>ul li{
    display: block;
    /* color: #000000; */
  }
}
@media(max-width:992px){
  .mobile-nav-toggle{
    display: block;
  }
}
/* Listing Dropdown - Desktop */
@media (min-width: 1200px) {
  .navmenu .listing-dropdown {
    position: static;
  }

  .navmenu .listing-dropdown ul {
    margin: 0;
    padding: 10px;
    background: var(--nav-dropdown-background-color);
    box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
    position: absolute;
    top: 130%;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    display: flex;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
  }

  .navmenu .listing-dropdown ul li {
    flex: 1;
  }

  .navmenu .listing-dropdown ul li a,
  .navmenu .listing-dropdown ul li:hover>a {
    padding: 10px 20px;
    font-size: 15px;
    color: var(--nav-dropdown-color);
    background-color: var(--nav-dropdown-background-color);
  }

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

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

/* Listing Dropdown - Mobile */
@media (max-width: 1199px) {
  .navmenu .listing-dropdown ul {
   
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .listing-dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .listing-dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: #0c0c0c;
  --default-color: #ffffff;
  --heading-color: #f9f9f9;
  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 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  border-top: 4px solid #19184D;
  padding: 30px 20px;
}

.footer .footer-about .logo {
  margin-bottom: 5px;
  letter-spacing: 1px;
  font-family: var(--heading-font);
  color: var(--heading-color);
  font-size: 36px;
  padding: 0;
  font-weight: 700;
}
.pic{
  width:40px;
  height:60vh;
}

.footer .footer-about p {
  font-size: 14px;
  text-align: center;
  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: #014AEE;
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: #014AEE;
  border-color: #014AEE;
}

.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:#014AEE;
}

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

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  display: flex;
  background-color: var(--background-color);
  transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: var(--background-color);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -8px -9px -8px 0;
  background: #19184D;
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 0;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background:#014AEE;
}

.footer .footer-newsletter .error-message {
  display: none;
  background: #19184D;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .loading {
  display: none;
  background: #19184D;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
}

.footer .footer-newsletter .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #19184D;
  border-top-color: #19184D;
  animation: subscription-loading 1s linear infinite;
}

@keyframes subscription-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

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

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

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
  color: #008B24;
}

/*--------------------------------------------------------------
# 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: #19184D;
  width: 40px;
  height: 40px;
  transition: all 0.4s;
}

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

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

.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;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  --background-color: #0c0c0c;
  --default-color: var(--contrast-color);
  --heading-color: var(--contrast-color);
  --accent-color: var(--contrast-color);
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  position: relative;
}

.page-title h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);

  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding: 30px 0;
  margin-bottom: 30px;
  position: relative;
  z-index: 100;}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 0;
  position: relative;
  z-index: 2;
}
.about .content-top{
  z-index: 100;
  position: relative;
  /* position: absolute; */
}

.section-title span {
  position: absolute;
  top: 4px;
  color: color-mix(in srgb, var(--heading-color), transparent 95%);
  left: 0;
  right: 0;
  z-index: 1;
  font-weight: 700;
  font-size: 52px;
  text-transform: uppercase;
  line-height: 1;
}

.section-title p {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 575px) {
  .section-title h2 {
    font-size: 28px;
    margin-bottom: 15px;
  }

  .section-title span {
    font-size: 38px;
  }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  
  background: transparent;
  --heading-color: #ffffff;
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 160px 0 100px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: inset(0);
}

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

.hero:before {
  content: "";
  background: rgba(20, 20, 95, 0.7);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h2 {
  margin: 0;
  font-size: 48px;
  text-transform: uppercase;
  font-weight: 700;
}

.hero p {
  margin: 10px 0 0 0;
  font-size: 24px;
  color: var(--heading-color);
}

.hero .btn-get-started {
  color: var(--default-color);
  font-weight: 400;
  font-size: 15px;
  display: inline-block;
  padding: 8px 30px;
  margin: 30px 0 0 0;
  transition: 0.5s;
  text-transform: uppercase;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 20%);
}

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

.professional-bg-container{
  position: relative;
}

.professional-bg-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(20, 20, 95, 0.7);
  pointer-events: none; /* Allows clicks to pass through to the container */
}

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

  .hero p {
    font-size: 18px;
  }
}



/*--------------------------------------------------------------
# Hero1 Section
--------------------------------------------------------------*/
.hero1 {
  
  background: transparent;
  --heading-color: #ffffff;
  width: 100%;
  min-height: 80vh;
  position: relative;
  padding: 160px 0 100px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.why-we-heading{
  color: white;
  font-weight: 800; 
  font-size: 80px;
}

@media (max-width:992px){
  .hero1{
    height: 100vh;
  }
  .hero1 img{
    object-fit: contain;
  }
  .why-we-heading{
    font-size: 27px;
    text-align: left;
  }
}

.hero1:before {
  content: "";
  background: rgba(20, 20, 95, 0.7);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero1 .container {
  position: relative;
  z-index: 3;
}

.hero1 h2 {
  margin: 0;
  font-size: 48px;
  text-transform: uppercase;
  font-weight: 700;
}

.hero1 p {
  margin: 10px 0 0 0;
  font-size: 24px;
  color: var(--heading-color);
}

.hero1 .btn-get-started {
  color: var(--default-color);
  font-weight: 400;
  font-size: 15px;
  display: inline-block;
  padding: 8px 30px;
  margin: 30px 0 0 0;
  transition: 0.5s;
  text-transform: uppercase;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 20%);
}

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

.professional-bg-container{
  position: relative;
}

.professional-bg-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(20, 20, 95, 0.7);
  pointer-events: none; /* Allows clicks to pass through to the container */
}

@media (max-width: 768px) {
  .hero1 h2 {
    font-size: 32px;
  }

  .hero1 p {
    font-size: 18px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-size: 2rem;
  font-weight: 700;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding-bottom: 10px;
}

.about .content ul i {
  font-size: 1.25rem;
  margin-right: 4px;
  color: var(--accent-color);
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .content .read-more {
  background: white;
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 30px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .content .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  padding-right: 25px;
}

.about .content .read-more:hover i {
  margin-left: 10px;
}
.about .about-header{
  z-index: 100;
  position: relative;
  text-align: center;
  padding-bottom:23px ;
  font-weight: bold;

}

/*--------------------------------------------------------------
# Cards Section
--------------------------------------------------------------*/
.cards .card {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 40px;
  margin: -1px;
  border-radius: 0;
}

.cards .card span {
  display: block;
  font-size: 24px;
  font-weight: 400;
  color: var(--accent-color);
}

.cards .card h4 {
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  font-size: 24px;
  font-weight: 600;
  padding: 0;
  margin: 20px 0;
}

.cards .card p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 15px;
  margin: 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  --background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 15px 0;
}

.clients .swiper {
  padding: 10px 0;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-slide img {
  transition: 0.3s;
}

.clients .swiper-slide img:hover {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  text-align: start;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 80px 20px;
  transition: all ease-in-out 0.3s;
  height: 100%;
}

.services .service-item .icon {
  margin: 0 auto;
  width: 64px;
  height: 64px;
  background: var(--accent-color);
  display: flex;
  align-items: start;
  justify-content: start;
  margin-bottom: 20px;
  transition: 0.3s;
  transform-style: preserve-3d;
}

.services .service-item .icon i {
  color: var(--contrast-color);
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item .icon::before {
  position: absolute;
  content: "";
  left: -8px;
  top: -8px;
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
  transition: all 0.3s ease-out 0s;
  transform: translateZ(-1px);
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover {
  background: rgb(25, 24, 77);
  border-color: rgb(25, 24, 77);
}

.services .service-item:hover .icon {
  background: var(--contrast-color);
}

.services .service-item:hover .icon i {
  color: var(--accent-color);
}

.services .service-item:hover .icon::before {
  background: color-mix(in srgb, var(--background-color), transparent 70%);
}

.services .service-item:hover h3,
.services .service-item:hover p {
  color: var(--contrast-color);
}

.services .service-item:hover .read-more {
  background: #008B24;
  color: white;
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 30px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.services .service-item:hover .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.services .service-item:hover .read-more:hover {
  background:#008B24;
  padding-right: 25px;
}

.services .service-item:hover .read-more:hover i {
  margin-left: 10px;
}
.image{
  height:40vh;
 max-width: 100%;
}






.service-title {
  text-align: center;
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.service-title h2 {
  font-size: 36px;
  margin: 0;
}
.service-title .dynamic-service-name {
  font-size: 36px;
  color: purple; /* Change color as needed */
  white-space: nowrap;
  margin: 0;
  font-weight: bold;
}

/* Styling for Services Section */
.services .container {
  position: relative;
}





/* Styling for Service Cards */
.services {
  padding: 50px 0;
}
.service-item {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.service-item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}
.service-item h3 {
  font-size: 24px;
  margin-bottom: 10px;
}
.service-item p {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}
.read-more {
  display: inline-flex;
  align-items: center;
  color: #007bff;
  text-decoration: none;
  transition: all 0.3s ease;
  text-align: center;
}
.read-more:hover {
  color: #0056b3;
}
.read-more span {
  margin-right: 5px;
  text-align: center;
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  --background-color: #000000;
  --default-color: #ffffff;
  --contrast-color: #ffffff;
  padding: 120px 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 50%);
  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);
}


/*--------------------------------------------------------------
# Call To Action Section for others
--------------------------------------------------------------*/


.call-to-actions img{
  position: fixed; 
}













/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/

.package-title {
  text-align: center;
  margin-bottom: 40px;
}

.package-title h2 {
  font-size: 36px;
  margin: 0;
  color: #333;
}

.package-title span {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
  color: #FF5733;
}

.package-title p {
  color: #666;
}

.nav-tabs {
  border-bottom: 2px solid #ddd;
  justify-content: center;
  margin-bottom: 30px;
}

.nav-tabs .nav-item {
  margin-bottom: 0;
}

.nav-tabs .nav-link {
  color: #555;
  border: none;
  border-radius: 50px;
  padding: 15px 20px;
  font-size: 18px;
  transition: background-color 0.3s;
  font-weight: bold;
}

.nav-tabs .nav-link.active {
  background-color: #19184D;
  color: #fff;
  border: none;
}


.tab-content {
  border: 2px solid #19184D;
  border-radius: 50px;
  padding: 20px;
  
}

.tab-pane {
  padding: 20px;
  display: none;
}

.tab-pane.active {
  display: block;
}

.package-card {
  height: 100%;
  border: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

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

.package-card-body {
  padding-bottom: 20px;
  padding-top: 0px;
  height: 100%;
  border-radius: 10px;
}

.plan-header {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
}

.plan-feature {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #666;
}

.plan-feature li {
  margin-bottom: 8px;
  position: relative;
  padding-left: 20px;
}

.plan-feature li:before {
  content: "\2022";
  color: #19184D;
  position: absolute;
  left: 0;
  top: 2px;
}

.buy-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #19184D;
  color: #fff;
  text-decoration: none;
  border-radius: 25px;
  transition: background-color 0.3s ease;
}

.buy-btn:hover {
  background-color: #C70039;
}























 .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: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--contrast-color);
  background-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 0 10px 0;
  }
}

.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
  padding: 60px;
  
  
}
.portfolio .portfolio-item h4{
  color: white;
}
.portfolio .portfolio-item1 {
  background-color: #ffa500;
  border-radius: 20px;
  
  
  
}

.portfolio .portfolio-item2  {
  background-color: #19184D;
  color: white;
  border-radius: 20px;
  
 
}

.portfolio .portfolio-item3 {
  background-color: green;
  border-radius: 20px;
 
  
}
.plan-header{
  color: black;
  font-size: 18px;
  font-weight: bold;
  
}

.plan-header-1{
  font-size: 24px;
  color: #19184D;
  font-weight: bold;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -100%;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  background:  red;
  padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4  {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
 
}

.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
  
  
}


.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  line-height: 0;
  
  
}

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

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;

} 

element.style{
  position: absolute;
  left: 372px;
  top: 0px;
  background-color: bisque;
}





  .pricing .pricing-item {
    padding: 60px 40px;
    box-shadow: 0 3px 20px -2px color-mix(in srgb, var(--default-color), transparent 90%);
    height: 100%;
    position: relative;
  }
  
  .pricing h3 {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 20px;
  }
  
  .pricing h4 {
    font-size: 48px;
    color: var(--accent-color);
    font-family: var(--heading-font);
    font-weight: 400;
  }
  
  .pricing h4 sup {
    font-size: 28px;
  }
  
  .pricing h4 span {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
    font-size: 18px;
  }
  
  .pricing ul {
    padding: 20px 0;
    list-style: none;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    text-align: left;
    line-height: 20px;
  }
  
  .pricing ul li {
    padding: 10px 0;
    display: flex;
    align-items: center;
  }
  
  .pricing ul i {
    color: #059652;
    font-size: 24px;
    padding-right: 3px;
  }
  
  .pricing ul .na {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
  }
  
  .pricing ul .na i {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
  }
  
  .pricing ul .na span {
    text-decoration: line-through;
  }
  
  .pricing .buy-btn {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    background-color: var(--background-color);
    display: inline-block;
    padding: 8px 35px 10px 35px;
    border-radius: 4px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
    transition: none;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--heading-font);
    transition: 0.3s;
  }
  
  .pricing .buy-btn:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--contrast-color);
  }
  
  .pricing .featured {
    z-index: 10;
  }
  
  .pricing .featured .pricing-item {
    background: red;
  }
  
  @media (min-width: 992px) {
    .pricing .featured .pricing-item {
      transform: scale(1.02, 1.1);
    }
  }
  
  .pricing .featured h3,
  .pricing .featured h4,
  .pricing .featured h4 span,
  .pricing .featured ul,
  .pricing .featured ul .na,
  .pricing .featured ul i,
  .pricing .featured ul .na i {
    color: var(--contrast-color);
  }
  
  .pricing .featured .buy-btn {
    background: var(--accent-color);
    color: var(--contrast-color);
    border-color: var(--contrast-color);
  }
  
  .pricing .featured .buy-btn:hover {
    background: color-mix(in srgb, var(--background-color), transparent 92%);
  }
  


/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/



/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .member {
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  text-align: center;
  margin-bottom: 20px;
}

.team .member img {
  
  max-width: 100%;
  margin: 30px 0;
}

.team .member .member-content {
  padding: 0 20px 30px 20px;
}

.team .member h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
}

.team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.team .member p {
  padding-top: 10px;
  font-size: 14px;
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.team .member .social {
  margin-top: 15px;
}

.team .member .social a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  transition: 0.3s;
}

.team .member .social a:hover {
  color: var(--accent-color);
}

.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  padding: 20px 0 30px 0;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

.contact .info-item i {
  color: #19184D;
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  border: 2px dotted #19184D;
}

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

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

.contact .php-email-form {
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #19184D;
  border-top-color: #19184D;
  animation: animate-loading 1s linear infinite;
}

.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: #19184D;
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: #19184D;
}

.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] {
  color: var(--contrast-color);
  background: #2388FA;
  border: 0;
  padding: 8px 30px 10px 30px;
  transition: 0.4s;
  border-radius: 0;
}
.contact .contact-form{
  width:100px;
}
.contact-head{
  font-size:28px;
  font-weight: bold;
  color: rgb(25, 24, 77);
  font-family: "Yanone kaffeesatz,sans-serif";
  padding-bottom: 20px;
}
.contact .php-email-form button[type=submit]{
  background-color: rgb(25, 24, 77);
}
.send-message{
  background-color:rgb(25, 24, 77) ;
  color: white;
}

.contact .php-email-form button[type=submit]:hover {
  background: #19184D;
}

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

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/


.border-btm{
  border-bottom: 2px solid #19184D;
  display: inline-block;
}


.demo{
  color: #19184D;
  /* margin-left:60px; */
  margin-bottom: 20px;
  
  text-decoration: underline;
}
.dog ul{
  padding-left: 10px;
  color: #ffffff;
}
.super{
  font-size: 20px;
  margin-bottom: 50px;
}

.missions-img{
  border-radius: 20px;
  width: 90%;
}

.icon{
  color: #007aff;
  font-size: 50px;
  align-self: center;
  padding-bottom: 20px;
}
.icon:hover{
  color: #000000;
}
.contact-detail::before {
  position: absolute;
  content: "";
  height: 50%;
  width: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(rgb(210, 243, 235, 1), rgba(230, 250, 245, .3));
  background-size: cover;
  border-radius: 10px;
  z-index: -1;
}

.contact-map {
  background: #19184D;
}

.contact-form {
  background: #19184D;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="email"] {
  
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea {
  width: 100%;
}

.required::after {
  content: "*";
  color: red;
}

.contact-page .form-div {
  padding: 0px 30px;
  overflow: hidden;
}

.contact-page .form-div form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.contact-page .form-div form .input {

  padding: 10px 10px;
  width: 100%;
  color: #fff;
  font-size: 22px;
  border: none;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 5px 5px 10px #fff,
      inset -5px -5px 10px #fff;

}

.contact-page .form-div form .form-btn {
  background: #ffffff;
  padding: 10px 15px;
  border-radius: 10px;
  /* width: 100%; */
  color: black;
  font-size: 18px;
  margin-top: 10px;

}

.btn-square {
  width: 38px;
  height: 38px;
}

.btn-sm-square {
  width: 32px;
  height: 32px;
}

.btn-md-square {
  width: 46px;
  height: 46px;
}
.text-secondary-color{
  color:#0000
}

.btn-lg-square {
  width: 58px;
  height: 58px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
}



.kitchen-container{
  background-image: url("assets/img/whataboutkitchen/img1.jpg");
  background-size: cover;
  
}

.banners{
  background-image: url("assets/img/whataboutkitchen/img1.jpg");
  /* height:200vh; */
  object-fit: cover;
  background-size:auto;
  text-align: start;
}

/* youtube testimonials */

.video-testimonials {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 20px;
  overflow: hidden;
  }
  
  .video-scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 20px 0;
  margin: 0 50px; /* Space for the scroll buttons */
  }
  
  .video-container {
  flex: 0 0 auto;
  width: 300px; /* Adjust width as needed */
  margin-right: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s;
  }
  
  .video-container:last-child {
  margin-right: 0;
  }
  
  .video-container:hover {
  transform: scale(1.05);
  }
  
  iframe {
  width: 100%;
  height: 200px; /* Adjust height as needed */
  border: none;
  }
  
  .scroll-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 1000;
  }
  
  .scroll-button.left {
  left: 0;
  }
  
  .scroll-button.right {
  right: 0;
  }


  /* google revies*/
  .review-box {
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    padding: 20px;
    margin-bottom: 20px;
    }
    
    .review-box h4 {
    margin-top: 0;
    }
    
    .stars {
    color: #ffc107; /* yellow color for stars */
    }
    
    .star {
    font-size: 24px;
    }
    .revie{
      text-align: justify;
    }
    

    /*footer img */
    .footerimgs{
      height:200px;
      width:300px;
    }
@media(max-width:1000px){
  .footerimgs{
    height:200px;
    max-width:100%;
  }
}
    /* hero section form */
  
    /* Custom styles */
    .left-container {
      float: right;
      width: 30%; /* Adjust the width as needed */
      padding: 20px;
      height: auto;
      background: linear-gradient(135deg, #ff6fd8, #4b6cb7, #71b280);
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
      color: white;
    }
  @media(max-width:992px){
    .left-container{
      width: 100%;
    }
  }
    .form-group {
      margin-bottom: 1.5rem;
    }
  
    .form-control {
      background-color: transparent;
      border: 1px solid black;
      border-radius: 5px;
      color: white;
    }
  
    .btn-primary {
      background-color: #4b6cb7;
      border-color: #4b6cb7;
      color: white;
      animation: heartbeat 1.5s infinite;
    }
  
    @keyframes heartbeat {
      0% {
        transform: scale(0.9);
      }
      50% {
        transform: scale(1);
      }
      100% {
        transform: scale(0.9);
      }
    }
/* hero section form end */

/* button */
.button {
  position: relative;
  width: 120px;
  height: 40px;
  background-color: #000;
  display: flex;
  align-items: center;
  color: white;
  flex-direction: column;
  justify-content: center;
  border: none;
  padding: 12px;
  gap: 12px;
  border-radius: 8px;
  cursor: pointer;
}

.button::before {
  content: '';
  position: absolute;
  inset: 0;
  left: -4px;
  top: -1px;
  margin: auto;
  width: 128px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );
  z-index: -10;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button::after {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

.button:hover::after {
  filter: blur(30px);
}

.button:hover::before {
  transform: rotate(-180deg);
}

.button:active::before {
  scale: 0.7;
}

/* */
    .commercial-office{
      height:40vh;
      width:40vw;
      border-radius: 20px;
      
    }

    .kitchen-img{
      width:35vw;
    }
    .contact-img{
      height:50px;
      width:50px;
    }


    /*******************************/
/*********** FAQs CSS **********/
/*******************************/
.faqs {
  position: relative;
  width: 100%;
  padding: 45px 0;
}

.faqs .row {
  position: relative;
}

.faqs .row::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  top: 0;
  left: calc(50% - .5px);
  background: #2078a4;
}

.faqs #accordion-1 {
  padding-right: 15px;
}

.faqs #accordion-2 {
  padding-left: 15px;
}

@media(max-width: 767.98px) {
  .faqs .row::after {
      display: none;
  }
  
  .faqs #accordion-1,
  .faqs #accordion-2 {
      padding: 0;
  }
  
  .faqs #accordion-2 {
      padding-top: 15px;
  }
}

.faqs .card {
  margin-bottom: 15px;
  border: none;
  border-radius: 0;
}

.faqs .card:last-child {
  margin-bottom: 0;
}

.faqs .card-header {
  padding: 0;
  border: none;
  background: #ffffff;
}

.faqs .card-header a {
  display: block;
  padding: 10px 25px;
  width: 100%;
  color: #121518;
  font-size: 16px;
  line-height: 40px;
  border: 1px solid rgba(0, 0, 0, .1);
  transition: .5s;
}

.faqs .card-header [data-toggle="collapse"][aria-expanded="true"] {
  background: #2078a4;
}

.faqs .card-header [data-toggle="collapse"]:after {
  font-family: 'font Awesome 5 Free';
  content: "\f067";
  float: right;
  color: #2078a4;
  font-size: 12px;
  font-weight: 900;
  transition: .5s;
}
.collapse{
  display: none;
}
.collapse.show{
  display: block !important;
  /* background-color: black; */
}
.faqs .card-header [data-toggle="collapse"][aria-expanded="true"]:after {
  font-family: 'font Awesome 5 Free';
  content: "\f068";
  float: right;
  color: #030f27;
  font-size: 12px;
  font-weight: 900;
  transition: .5s;
}

.faqs .card-body {
  padding: 20px 25px;
  font-size: 16px;
  background: #19184D;
  border: 1px solid rgba(0, 0, 0, .1);
  border-top: none;
}


/* elevate your space section button style*/

  .by {
  border-radius: .25rem;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 400;
  padding-left: 25px;
  padding-right: 25px;
  color: #fff;
  
  height: 40px;
  font-size: 0.7rem;
  line-height: 14px;
  letter-spacing: 1.2px;
  transition: .2s .1s;
  background-color: #19184D;
  border: 0 solid;
  overflow: hidden;
}

.by:hover {
  cursor: pointer;
  transition: all .3s ease-in;
  padding-right: 30px;
  padding-left: 30px;
}
/* elevate your space section button style*/


/* budget friendly btn */
.btn {
  
  --border-width: 0.125em;
  --curve-size: 0.5em;
  --blur: 30px;
  --bg: #080312;
  --color: #afffff;
  color: var(--color);
  cursor: pointer;
  /* use position: relative; so that BG is only for .btn */
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-content: center;
  padding: 0.5em 1.5em;
  font-size: 17px;
  border: 0;
  text-transform: uppercase;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6);
  
  transition: color 250ms;
}

.btn::after,
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
}

.btn::before {
  background: var(--border-color);
  background-size: 300% 300%;
  animation: move-bg7234 5s ease infinite;
  z-index: -2;
}

@keyframes move-bg7234 {
  0% {
    background-position: 31% 0%;
  }

  50% {
    background-position: 70% 100%;
  }

  100% {
    background-position: 31% 0%;
  }
}


/* end to end */

/* logo bg*/
/* .bgss {
  background-color: white;
padding: 10px;
} */
  /* border-radius: 70px;
  height: 130px;
  width: 130px;
  padding-top: 20px;
  text-align: center;

} */



/* reviews */
/* .container {
  padding: 20px;
} */

.reviews-container-wrapper {
  overflow: hidden;
  width: 100%; /* Full width */
  margin: 0 auto; /* Center horizontally */
}

.reviews-container {
  display: flex;
  animation: scroll 20s linear infinite; /* Adjust duration as needed */
}

.review-box {
  min-width: 300px; /* Adjust width of each review box */
  max-width: 100%; /* Ensure it fits within the container */
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  padding: 20px;
  margin: 10px;
  transition: transform 0.3s ease; /* Smooth transition */
  cursor: pointer;
  border-radius: 10px;
}

.review-box:hover {
  transform: scale(1.1); /* Zoom effect on hover */
}

.stars {
  color: gold;
  font-size: 30px;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% - 20px)); } /* Adjust offset for continuous loop */
}

.reviews-container-wrapper:hover .reviews-container {
  animation-play-state: paused;
}


.card-title {
  text-align: center;
  margin-bottom: 50px;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.service-item {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  position: relative;
}
.service-item:hover {
  transform: scale(1.05);
}
.service-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.service-content {
  padding: 20px;
}
.service-content h3 {
  font-size: 20px;
  color: #19184D;
}
.service-content p {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}
.service-content .read-more a {
  display: inline-block;
  margin-top: 10px;
  color: #007BFF;
  text-decoration: none;
  font-weight: bold;
}
.service-content .read-more a:hover {
  text-decoration: underline;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.service-item:hover .overlay {
  opacity: 1;
}
.overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}
.overlay-content h3 {
  font-size: 24px;
}
.overlay-content p {
  font-size: 16px;
}

.imgclass{
  
  height: 600px;
  width:100%;
}


.backss{
  background-color:  #19184D;
  border-radius: 10px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  text-align: center;
  padding-top: 10px;
  /* height:50px; */
}

.justs{
  color:blue;
  font-size: 20px;
}

.package-card {
  border: 2px solid blue; /* You can adjust the border width as needed */
  border-radius: 10px;
}


/* .packbud1{
  background:white;
  border-radius: 10px;
}
.packbud2{
  background: white;
  border-radius: 10px;
} */

.clintschoose{
  height:270px;
  width:400px;
  text-align: center;
  
}
@media(max-width:992px){
  .clintschoose{
    width: 100%;
  }
}
/* linear-gradient(135deg, #4b6cb7, #71b280, #ff6fd8);*/

.backicons{
  background-color:lightblue;
  height:32px;
  width:32px;
  padding: 2px;
  border-radius: 2px;
}

.rightssym{
  height:20px;
  width:20px;
 
}
.googlesreviews{
  height: 130px;
  width:250px;
  text-align: center;
}
.modal-text{
  color: #000;
}
.modal{
    z-index: 999;
}
#patterns-link{
  color: #19184d;
}

#patterns-link:hover{
  color: #19184D ;
}


@media (max-width:992px){
  .contact-form .rounded{
    padding: 0 !important;
  }
}