html{
	scroll-behavior: smooth;
}

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

a{
	text-decoration: none;
}

a:hover{
	text-decoration: none;
}

h1,h2,h3,h4,h5,h6{
	font-family: 'Raleway', sans-serif;
}

section{
	padding: 60px 0;
	overflow: hidden;
}

.section_bg{
	background-color: #f6f6f7;
}

.section_title{
	padding-bottom: 30px;
}

.section_title p{
	margin-bottom:0 ;
	font-family: 'Open Sans', sans-serif;
	color: #444444;	
}

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

.section_title h2::after{
	content: "";
	position: absolute;
	display: block;
	width: 50px;
	height: 3px;
	background-color: #009970;
	bottom: 0;
	left: 0;
}

/** Navigation Bar CSS **/

#navigation {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333333; /* changed from #ffffe0 */
    padding: 0;
    z-index: 9999;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    transition: 0.5s all;
}

#navigation .container-fluid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

/* Logo Section */
.logo-container {
    display: flex;
    align-items: center;
}

.black-box,
.yellow-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    width: 44px;
    border: 2px solid #fff;
    box-sizing: border-box;
}

.black-box {
    background-color: #000;
}

.yellow-box {
    background-color: #FFC000;
}

.black-box .text,
.yellow-box .text {
    font-family: 'Engravers MT', 'EngryFont',serif; /* New fonts with fallback */
    font-size: 34px;
    color: #fff;
    font-weight: bold;
    line-height: 1;
}

.red-box {
    background-color: #FF0000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    width: 44px;
    border: 2px solid #fff;
    box-sizing: border-box;
}

.red-box .icon {
    color: #fff;
    font-size: 22px; /* Slightly smaller than text size for balance */
    line-height: 1;
}

/* Reuse base rocket styles and tweak for navbar */
.rocket-icon.navbar-rocket {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 8px; /* Adjust to fit the 44x44 box */
  color: white;
  transform: rotate(0deg); /* same as your hero rocket */
  z-index: 2;
  pointer-events: none;
  animation: none;
}

/* Navbar Menu */
#navbarNav {
    background-color: #333333; /* changed from #FFF4E6 to match nav */
}

#navbarNav a {
    display: block;
    color: #ffffff; /* changed from #36343a */
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    transition: 0.3s all;
}

#navbarNav a:hover {
    
    color: #009970; /* Optional: bright gold or lime for hover visibility from  color: #FFD700; */
    text-decoration: none;
}

#navbarNav .nav-link.active {
    color: #FFD700; /* Same highlight for active link from color: #009970; */
}

/* Get Started Button */
#get-started a {
    background-color: #D93025;
    color: #fff;
    border-radius: 50px;
    padding: 10px 25px;
    margin: 0 15px;
}

#get-started a:hover {
    color: #fff;
    background-color: #00805d;
}

/* Responsive Navbar Toggle */
.navbar-toggler {
    border: none;
}

.navbar-toggler .fa-bars {
    font-size: 20px;
    color: #ffffff; /* changed from #36343a */
}

/* Navbar Scroll Effect */
#navigation.nav-scroll {
    background-color: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    top: 0;
}


/** Navigation Bar CSS End **/




/*** HomeSection CSS ***/

/* Hero Section Container */
/*** home Section CSS ***/

/* Hero Section Container */
#hero {
  width: 100%;
  background: linear-gradient(135deg, #0b1c3d, #1a2a4f);
  color: white;
  padding: 20px 100px 15px 5px;
  box-sizing: border-box;
  align-items: flex-start;
  min-height: 100vh;
}

/* Welcome message centered at top */
.hero-welcome {
  text-align: center;
  margin-bottom: 40px;
  flex: 1 1 auto;
  max-width: 90%;
  margin-top: -460px;
  margin-left: 100px;
}

.welcome-heading {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 5px;
}

.welcome-subheading {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #eee;
  line-height: 1.1;
}

/* Three-column layout */
.hero-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}


/* --- Left: Logo --- */
.hero-left {
  flex: 1 1 220px;
  max-width: 266px;
  margin-top: 200px;
}

.logo-box {
  border: 4px solid black;
  background-color: white;
  padding: 6px;
}

.logo-row-top {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.logo-part {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 88px;
  font-family: 'Engravers MT', 'EngryFont', serif;
  color: white;
}

.left-part { background-color: black; }
.middle-part { background-color: #FFD700; }

.envelope-part {
  position: relative;
  background-color: #ef3b3b;
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.envelope-icon i.fa-envelope {
  font-size: 80px;
  color: white;
}

.rocket-icon {
  position: absolute;
  top: 6px;
  right: 6px;
  transform: rotate(45deg);
  font-size: 25px;
  color: white;
  animation: rocket-nudge 1.5s ease-in-out infinite;
}

@keyframes rocket-nudge {
  0%   { transform: rotate(0deg) translate(0, 0); }
  50%  { transform: rotate(0deg) translate(6px, -6px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}

.logo-title {
  font-family: 'Forum', 'Georgia', serif;
  font-size: 20px;
  font-weight: 600;
  margin-top: 0px;
  margin-left: 40px;
  color: white;
}


/* --- Middle: Bullet Points --- */
.hero-middle {
  flex: 1 1 auto;
  margin-left: 290px;
  max-width: 600px;
}

.hero-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero-bullets li {
  margin-bottom: 20px;
}

.bullet-title {
  color: #ff4d4d;
  font-weight: 700;
  font-size: 18px;
}

.bullet-desc {
  color: white;
  font-size: 16px;
  margin-top: 4px;
  display: block;
}


/* --- Right: Fake Google Sheet --- */
/* --- Right: Fake Google Sheet --- */
.hero-right {
  flex: 1 1 250px;
  margin-left: 900px;
  margin-top: -850px;
  position: relative;
}

.animated-sheet-container {
  max-height: 500px;
  overflow: hidden;
  background: white;
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(0,0,0,0.1);
  font-family: 'Arial', sans-serif;
}

.fake-google-sheet table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: black;
  table-layout: fixed;
}

.fake-google-sheet th,
.fake-google-sheet td {
  border: 1px solid #ddd;
  padding: 6px 4px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Specific widths for Outcome and Live Notification columns */
.fake-google-sheet th:nth-child(4),
.fake-google-sheet td:nth-child(4) {
 white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  width: 117px; /* Outcome */
}

.fake-google-sheet th:nth-child(5),
.fake-google-sheet td:nth-child(5) {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  width: 168px; /* 1.5x Outcome = Live Notification */
}

.outcome-cell {
  transition: background-color 0.4s ease, color 0.4s ease;
  font-weight: bold;
  text-align: center;
}

/* New: Live Notification cell style (if needed) */
.live-cell {
  text-align: center;
  font-weight: 500;
}

.live-animate-text {
  font-weight: bold;
  color: #002366; /* Dark Royal Blue */
  animation: fadeIn 0.4s ease;
}

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

/* Fluctuating (blinking) message */
/* Fluctuating (blinking) message */
.live-animate-blink {
  font-weight: bold;
  color: #FF8C00; /* Dark Orange */
  animation: blinkText 1s infinite;
}

@keyframes blinkText {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

/* Final static dark orange text */
.live-animate-final {
  font-weight: bold;
  color: #FF8C00; /* Dark Orange */
}

.live-animate-green {
  color: #006400; /* Dark green */
  font-weight: bold;
}

.live-animate-red {
  color: #B22222; /* Firebrick red */
  font-weight: bold;
}



/* --- Google Sheet Styled Header --- */
.sheet-header {
  display: flex;
  align-items: center;
  background-color: #0F9D58; /* Google green */
  color: white;
  font-weight: bold;
  padding: 6px 12px;
  font-size: 14px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-family: 'Arial', sans-serif;
}

.sheet-logo {
  font-size: 16px;
  margin-right: 8px;
}

.sheet-title {
  font-size: 14px;
}


/* --- Mobile View --- */
@media (max-width: 768px) {
  .hero-body {
    flex-direction: column;
    align-items: center;
  }

  .hero-left, .hero-middle, .hero-right {
    max-width: 100%;
    text-align: center;
  }

  .logo-box {
    margin: 0 auto;
  }

  .hero-welcome {
    margin-top: -300px;
    margin-left: 20px;
    margin-right: 20px;
    text-align: left;
  }
}


/*** Home Section Ends ***/


/* How It Works Section */
.how-it-works {
  padding: 60px 0;
  background-color: #600b0b; /* Same maroon as pricing section */
  color: #f5f5f5; /* Light text for contrast */
}

.how-it-works .section_title h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 32px;
  font-weight: bold;
  color: #ffffff; /* White heading */
}

.step-description.plain-text h3 {
  color: #ffffff; /* White step heading */
  margin-top: 180px;
  font-size: 20px;
  font-weight: bold;
}

.step-description.plain-text p,
.step-description.plain-text div,
.step-description.plain-text li,
.step-description.plain-text strong {
  color: #f2f2f2; /* Slightly off-white for description */
}

.step-description.plain-text ul {
  color: #f2f2f2;
}



.step-row {
  margin-bottom: 60px;
}

.step-row.step-1 {
  margin-bottom: -180px;
}

.step-image-wrapper {
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.step-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}

.step-image-wrapper.compressed {
  transform: scaleY(0.6);
  transform-origin: top;
  margin-bottom: 10px;
}

.step-description.plain-text {
  padding-left: 20px;
}

.step-description h3 {
  margin-top: 180px;
  font-size: 20px;
  margin-bottom: 10px;
  color: #0b3c85;
  font-weight: bold;
}

.step-description p {
  font-size: 14px;
  color: #333;
  line-height: 1.6;
}

.step-description.step-2 {
  margin-top: 40px;
}

/* Adjust overall Step 3 text section */
/* Container column for descriptions */
.step-description.step-3 {
  position: relative;
  margin-top: -50px;
  padding-left: 10px;
}

/* Block wrapper around each step line */
.step3-block {
  position: relative;
}

/* Line between blocks (except last one) */
.step3-block::after {
  content: '';
  position: absolute;
  left: -10px; /* adjust to center between blocks */
  top: 100%;
  width: 2px;
  height: 260px; /* matches .step3-line margin */
  border-left: 2px dotted #aaa;
}

/* Don’t show line after the last step */
.step3-block:last-child::after {
  display: none;
}

/* Step line styling */
.step3-line {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 260px;
  position: relative;
  z-index: 1;
}

/* Styling for UL inside step */
.step3-ul {
  margin-left: 18px;
  margin-top: 8px;
  margin-bottom: 0;
  padding-left: 18px;
}



.step-image-wrapper.compressed-70 {
  transform: scaleY(0.7);
  transform-origin: top;
  margin-bottom: 2px;
}

.step-image-wrapper.step3-img {
  margin-bottom: 2px;
}

/* Specific margins between Step 3 images */
.step-row.step-3 .step-image-container .step-image-wrapper:nth-of-type(1) {
  margin-bottom: -110px;
}
.step-row.step-3 .step-image-container .step-image-wrapper:nth-of-type(2) {
  margin-bottom: -170px;
}
.step-row.step-3 .step-image-container .step-image-wrapper:nth-of-type(3) {
  margin-bottom: 10px;
}
.step-row.step-3 .step-image-container .step-image-wrapper:nth-of-type(4) {
  margin-bottom: -160px;
}
.step-row.step-3 .step-image-container .step-image-wrapper:nth-of-type(5) {
  margin-bottom: 10px;
}


/* Optional: fine-tuned image top spacing */
.step4-img-adjust {
  margin-top: -90px; /* Adjust as needed to reduce vertical gap from Step 3 */
}

.step-description.step-4 {
  margin-top: -150px;
}

.step4-line {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin-top: 20px;
}

/* Optional: fine-tuned image top spacing */
.step5-img-adjust {
  margin-top: 20px; /* Adjust to align nicely under Step 4 */
}

.step-description.step-5 {
  margin-top: -80px;
}

.step5-line {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin-top: 20px;
}

/* Optional: fine-tuned image top spacing */
.step6-img-adjust {
  margin-top: 70px; /* Adjust based on your visual preference */
}

.step-description.step-6 {
  margin-top: 0px;
}

.step6-line {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin-top: 20px;
}

.step6-ul {
  margin-left: 18px;
  margin-top: 8px;
  margin-bottom: 0;
  padding-left: 18px;
}





/*** How it works Section End ***/


/*** Feature Section Start ***/


.features .iconbox {
    text-align: center;
    padding: 40px 20px;
    background-color: #fff;
    transition: 0.6s ease-in-out;
    border-radius: 10px;  /* Slightly rounded corners for a modern look */
    position: relative;  /* Ensures effects are well-positioned */
    overflow: hidden;  /* Ensures hover effects don't overflow */
}

.features .iconbox:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);  /* Enhance shadow for a more pronounced hover */
    transform: translateY(-5px);  /* Lift the box slightly on hover */
}

.features .iconbox .icon {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 64px;
    height: 64px;
    border-radius: 50px;
    border: 1px solid #009970;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #009970;
    font-size: 28px;
    background-color: #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.features .iconbox .icon i {
    font-size: 28px;
}

.features .iconbox:hover .icon {
    background-color: #009970;
    color: #fff;
}

.features .iconbox h4 {
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 24px;
    padding-top: 50px; /* Added some top padding to prevent overlap with the icon */
    transition: color 0.3s ease;
}

.features .iconbox h4 a {
    color: #36343a;
    transition: color 0.3s ease-in-out;
}

.features .iconbox:hover h4 a {
    color: #009970;
}

.features .iconbox p {
    line-height: 24px;
    font-family: 'Open Sans', sans-serif;
    color: #444;
    font-size: 14px;
    margin-bottom: 0;
    transition: color 0.3s ease;
}

.features .iconbox:hover p {
    color: #333;  /* Subtle change on hover */
}

/* Hover effect on background box */
.features .iconbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.features .iconbox:hover::before {
    opacity: 0.15;
}


/*** Feature Section Ends ***/



/*** Pricing Section starts ***/

.pricing-card {
    background: #f5f5f5;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

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

  .pricing-header {
    background: #fff;
    padding: 20px;
    border-bottom: 1px solid #ddd;
    text-align: center;
  }

  .pricing-header h3 {
    color: #c71b1b;
    margin-bottom: 10px;
  }

  .pricing-header .price {
    font-size: 24px;
    color: #000;
  }

  .pricing-header .price small {
    font-size: 14px;
    display: block;
    color: #555;
  }

  .pricing-body {
    background: #eaeaea;
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .pricing-body ul {
    padding-left: 20px;
    color: #333;
    margin-bottom: 20px;
  }

  .pricing-body ul li {
    margin-bottom: 8px;
    list-style-type: disc;
  }

  .btn-red {
    background-color: #c71b1b;
    color: white;
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    display: inline-block;
    transition: background 0.3s ease;
  }

  .btn-red:hover {
    background-color: #a21313;
  }

  .btn-red.disabled {
    background-color: #999;
    pointer-events: none;
  }

  .coming-soon .pricing-header,
  .coming-soon .pricing-body {
    background: #f2f2f2;
    color: #999;
  }

  .coming-soon h3 {
    color: #999;
  }

  .coming-soon .price {
    color: #999;
  }


/*** Pricing Section End ***/



/*** Contact section ***/

.contact .section_title h2,
.contact .section_title p,
.contact .section_title strong {
  color: white;
}


.contact .info{
	padding: 16px;
	width: 100%;
	background-color: #fff;
	box-shadow: 0 0 25px 0 rgba(0,0,0,0.1);
	display: flex;

}

.contact .info_inner{
	padding-left: 15px;
}

.contact .info i{
	font-size: 20px;
	color: #fff;
	width: 44px;
	height: 44px;
	background-color: #009970;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: 0.3s ease-in-out;
}
.contact .info i:hover{
	background-color: #00805d;
}
.contact .info h4{
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 5px;
	color: #686470; /* from color: #686470; */
}

.contact .info p{
	margin-bottom: 0;
	font-size: 14px;
	color: #686470; /* from color: #686470; */
	font-family: 'Open Sans', sans-serif;
}

.contact .email_form{
	width: 100%;
	padding: 30px;
	background-color: #fff;
	box-shadow: 0 0 25px 0 rgba(0,0,0,0.1);
}

.contact .email_form input{
	height: 44px;
}

.contact .email_form input,.contact .email_form textarea{
border-radius: 0;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}

.contact .email_form button{
	border: none;
	background-color: #009970;
	padding: 10px 30px;
	color: #fff;
	border-radius: 50px;
	transition: 0.3s ease-in-out;
	font-family: 'Open Sans', sans-serif;

}

.contact .email_form button:hover{
	background-color: #00805d;
}

/*** Contact section End ***/

/*** Footer section ***/
#footer {
	background-color: #f1f0f2;
	font-size: 14px;
	color: #ffffff;
	padding: 10px 0; /* Reduce padding to minimize vertical space */
}

#footer .footer_top {
	padding: 30px 0 30px 0;
	background-color: #060506;
	padding: 12px 0; /* Reduce the padding to tighten the space around the content */
}

#footer .copyright {
	font-family: 'Open Sans', sans-serif;
}

#footer .social {
	display: flex;
	align-items: center;
	justify-content: center;
}

#footer .social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	margin: 0 3px;
	transition: 0.3s ease-in-out;
}

/* Specific styles for each social media icon */
#footer .social a.facebook {
	background-color: #3b5998; /* Facebook Blue */
}

#footer .social a.twitter {
	background-color: #1da1f2; /* Twitter Blue */
}

#footer .social a.instagram {
	background-color: #e1306c; /* Instagram Pink */
}

#footer .social a.linkedin {
	background-color: #0077b5; /* LinkedIn Blue */
}

/* Hover effects */
#footer .social a.facebook:hover {
	background-color: #2d4373; /* Darker Facebook Blue */
}

#footer .social a.twitter:hover {
	background-color: #1a91da; /* Darker Twitter Blue */
}

#footer .social a.instagram:hover {
	background-color: #c13584; /* Darker Instagram Pink */
}

#footer .social a.linkedin:hover {
	background-color: #005582; /* Darker LinkedIn Blue */
}

#footer .social a i {
	color: #fff;
	font-size: 16px;
}

/*** Footer section End ***/

/*** Back to top Button ***/
.back_to_top{
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 15px;
	bottom: 15px;
	z-index: 9999;
	background-color: #009970;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	transition: 0.4s all;

}

.back_to_top i{
	color: #fff;
	font-size: 18px;
}

.back_to_top:hover{
	background-color: #00c28e;
}

.back_to_top.show_btn{
	opacity: 1;
	visibility: visible;
}

/*** Back to top Button End ***/

/*** enquiry form floating envelope button ***/
.floating_button{
	position: fixed;
	visibility: visible;
	left: 15px;
	bottom: 15px;
	z-index: 9999;
	background-color: #f09440;
	width: 36px;  
	height: 36px;
	border-radius: 50%;
	transition: 0.4s all;

}

.floating_button i{
	color: #fff;
	font-size: 18px;
}

.floating_button:hover{
	background-color: #FFEB99;
}

.floating_button.show_btn{
	opacity: 1;
	visibility: visible;
}

/*** Enquiry form floating envelope Button End ***/


/*** whatsapp chat  floating phone button starts ***/
.floating_whatsapp{
	position: fixed;
	visibility: visible;
	left: 60px;
	bottom: 15px;
	z-index: 9999;
	background-color: #25D366;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	transition: 0.4s all;

}

.floating_whatsapp i{
	color: #fff;
	font-size: 28px;
}

.floating_whatsapp:hover{
	background-color: #128C7E;
}

.floating_whatsapp.show_btn{
	opacity: 1;
	visibility: visible;
}

/*** Whatsapp chat floating phone Button End ***/

/*** facebook  floating phone button starts ***/
.floating_facebook{
	position: fixed;
	visibility: visible;
	left: 115px;
	bottom: 15px;
	z-index: 9999;
	background-color: #3b5998;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: 0.4s all;

}

.floating_facebook i{
	color: #fff;
	font-size: 28px;
}

.floating_facebook:hover{
	background-color: #2d4373;
}

.floating_facebook.show_btn{
	opacity: 1;
	visibility: visible;
}

/*** facebook floating phone Button End ***/

/*** linkedin  floating phone button starts ***/
.floating_linkedin{
	position: fixed;
	visibility: visible;
	left: 165px;
	bottom: 15px;
	z-index: 9999;
	background-color: #0077b5;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	transition: 0.4s all;

}

.floating_linkedin i{
	color: #fff;
	font-size: 28px;
}

.floating_linkedin:hover{
	background-color: #005582;
}

.floating_linkedin.show_btn{
	opacity: 1;
	visibility: visible;
}

/*** Linkedin floating phone Button End ***/




/** Responsive CSS **/

@media only screen and (max-width: 991px) {
    #navigation {
        background-color: #009970;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    }

    #navigation #navbarNav {
        background-color: #009970;
    }

    #navigation #navbarNav .navbar-nav {
        padding-bottom: 15px;
    }

    .black-box,
    .yellow-box {
        height: 36px; /* Smaller height for mobile */
        width: 36px; /* Smaller width for mobile */
    }

    .black-box .text,
    .yellow-box .text {
        font-family: 'Engravers MT','EngryFont', 'CM PRADAESQUE', serif; /* New fonts with fallback */
        font-size: 28px; /* Reduced font size for mobile */
    }

    .logo-container {
        justify-content: center; /* Center logo on mobile */
    }

    #navigation #navbarNav a {
        color: #fff;
        text-align: center;
    }

    #navigation #navbarNav a:hover {
        color: #fff;
    }

    #navigation.nav-scroll {
        background-color: #009970;
    }

    #navigation .navbar-toggler span {
        color: #fff;
        font-size: 21px;
    }

    #navigation .navbar-toggler:focus {
        outline: none;
    }

    #hero h1 {
        font-size: 18px;
        line-height: 20px;
        margin-left: 8px;
        margin-bottom: 4px;
    }

    #hero h2 {
        font-size: 8px;
        margin-left: 8px;
    }

    /* Adjust the column layout for smaller screens */
    .gallery .col-lg-3,
    .gallery .col-md-4,
    .gallery .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*** Resonsive CSS End***/