
/* General box styling */
.info-stat.box {
    padding: 10px; /* Reduced padding for smaller height */
    margin: 15px 0; /* Slightly reduced margin for tighter spacing */
    background-color: #007bff; /* Box background color (blue) */
    color: #f8f9fa !important; /* Light gray text for better contrast */
    border-radius: 10px; /* Rounded corners */
    text-align: center; /* Center-align text */
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); Subtle shadow */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow for depth */
  
    min-height: 50px; /* Define a smaller minimum height */
    display: flex; /* Align items inside the box */
    justify-content: center;
    align-items: center;
  }
  
  /* Alternative background for every other box */
  .info-stat.box:nth-child(odd) {
    background-color: #28a745; /* Green background */
    color: #ffffff; /* White text for green boxes */
  }
  
  /* Styling for headers inside the boxes */
  .info-stat.box h4 {
    color: #ffffff !important; /* Light gray text for blue boxes */
  
    margin: 5px 0; /* Tighter spacing between headers */
    font-size: 16px; /* Slightly smaller font size */
    font-weight: 600; /* Semi-bold text */
  }
  
  
  /* General box styling */
  .info-stat.box {
    padding: 15px; /* Moderate padding for balance */
    margin: 20px 0; /* Spacing between boxes */
    border-radius: 15px; /* Rounded corners for a softer look */
    text-align: center; /* Center-align text */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow for depth */
    min-height: 100px; /* Slightly taller boxes */
    display: flex; /* Align items inside the box */
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Stack text vertically */
    transition: transform 0.3s ease; /* Slight hover effect */
  }
  
  /* Hover effect */
  .info-stat.box:hover {
    transform: scale(1.05); /* Slight zoom on hover */
  }
  
  /* Box backgrounds with vibrant colors */
  .info-stat.box:nth-child(1) {
    background: linear-gradient(135deg, #ff9a9e, #fad0c4); /* Pink gradient */
    color: #3d3d3d; /* Dark text for contrast */
  }
  
  .info-stat.box:nth-child(2) {
    background: linear-gradient(135deg, #a18cd1, #fbc2eb); /* Purple gradient */
    color: #ffffff; /* White text for contrast */
  }
  
  /* Add more styles for other boxes if needed */
  .info-stat.box:nth-child(3) {
    background: linear-gradient(135deg, #84fab0, #8fd3f4); /* Green and blue gradient */
    color: #ffffff;
  }
  
  .info-stat.box:nth-child(4) {
    background: linear-gradient(135deg, #ffecd2, #fcb69f); /* Peach gradient */
    color: #3d3d3d;
  }
  
  /* Text styling inside the boxes */
  .info-stat.box h4 {
    font-family: 'Comic Sans MS', cursive, sans-serif; /* Playful font */
    margin: 5px 0; /* Tighter spacing */
    font-size: 18px; /* Larger text for visibility */
    font-weight: bold; /* Bold for emphasis */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Subtle shadow for text depth */
  }
  
  
  /* General box styling */
  .info-stat.box {
    padding: 15px;
    margin: 20px 0; /* Space between boxes */
    background: #e0e5ec; /* Light background color for neumorphism */
    border-radius: 15px; /* Rounded corners for a soft look */
    text-align: center; /* Center-align text */
    box-shadow: inset 6px 6px 12px #bebebe, /* Inset shadow for depth */
                inset -6px -6px 12px #ffffff; /* Light source shadow */
    min-height: 50px; /* Height of the box */
    display: flex; /* Align items */
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Stack the text vertically */
  }
  
  /* Text inside the box */
  .info-stat.box h4 {
    font-family: 'Comic Sans MS', cursive, sans-serif; /* Playful font */
    margin: 5px 0;
    font-size: 18px;
    font-weight: bold;
    color: #3d3d3d; /* Dark gray text */
  }
  
  /* Background color adjustments for each box */
  .info-stat.box:nth-child(1) {
    background: #f3f4f9;
    box-shadow: inset 6px 6px 12px #d1d2d7, inset -6px -6px 12px #ffffff;
  }
  
  .info-stat.box:nth-child(2) {
    background: #f9f3f9;
    box-shadow: inset 6px 6px 12px #d7cfd7, inset -6px -6px 12px #ffffff;
  }
  
  .info-stat.box:nth-child(3) {
    background: #f3f9f4;
    box-shadow: inset 6px 6px 12px #d1d7d3, inset -6px -6px 12px #ffffff;
  }
  
  .info-stat.box:nth-child(4) {
    background: #f9f8f3;
    box-shadow: inset 6px 6px 12px #d7d6cf, inset -6px -6px 12px #ffffff;
  }


  
.main-warn-button a {
    display: inline-block;
    background-color: #ea7d17;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    text-transform: capitalize;
    padding: 12px 25px;
    border-radius: 23px;
    letter-spacing: 0.25px;
    border-bottom: 2px solid #ea7d17 !important;
    transition: all .3s;
  }
  
  .main-warn-button a:hover {
    background-color: #4771cb !important;
    color: #fff!important;
    border-bottom: 2px solid #4771cb!important;
  }

  .main-banner .left-content h2{
    background: linear-gradient(to right, #4771cb 0%, #FF4F6B 100%);
    -webkit-background-clip: text;
  }

  
.thrid-feature .icon {
    background-image: url(../images/implementation.png);
    background-repeat: no-repeat;
  background-position: center center;
  }

.thrid-feature:hover .icon {
    background-image: url(../images/project-create.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


  
.four-feature .icon {
    background-image: url(../images/expo.png);
    background-repeat: no-repeat;
  background-position: center center;
  }

.four-feature:hover .icon {
    background-image: url(../images/expo.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
  
/* Modal styling */
.modal-dialog {
    max-width: 90%;
    margin: 30px auto;
  }
  
  .modal-body {
    text-align: center;
  }
  
  #fullImage {
    max-width: 100%;
    height: auto;
  }
  
  .portfolio-image {
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  
  .portfolio-image:hover {
    transform: scale(1.05);
  }
  

  /* Basic Styles for the Packages */
.our-packages .package-item {
    position: relative;
    margin-bottom: 30px;
  }
  
  .our-packages .thumb {
    position: relative;
  }
  
  .our-packages .thumb img {
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease-in-out;
  }
  
  .our-packages .hover-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
  }
  
  .our-packages .package-item:hover .thumb img {
    opacity: 0.7;
  }
  
  .our-packages .package-item:hover .hover-content {
    opacity: 1;
    visibility: visible;
  }
  
  .our-packages .hover-content h4 {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: bold;
  }
  
  .our-packages .hover-content ul {
    list-style-type: none;
    padding-left: 0;
  }
  
  .our-packages .hover-content ul li {
    font-size: 16px;
    margin-bottom: 8px;
  }
  

/* 
---------------------------------------------
Pricing
--------------------------------------------- 
*/

.pricing-tables .tables-left-dec img {
    width: 418px;
    height: 851px;
    left: 0;
    top: 120px;
    position: absolute;
    z-index: 1;
  }
  
  .pricing-tables .tables-right-dec img {
    width: 359px;
    height: 848px;
    right: 0;
    top: 45px;
    position: absolute;
    z-index: 1
  }
  
  .pricing-tables {
    z-index: 2;
    position: relative;
    padding-top: 120px;
    margin-top: 0px;
  }
  
  .pricing-tables .section-heading {
    text-align: center;
    margin-bottom: 60px;
  }
  
  .pricing-tables .section-heading h2 {
    text-align: center;
    /* margin: 0px 60px 0px 60px; */
    margin-bottom: -5px;
    position: relative;
    z-index: 1;
  }
  
  .pricing-tables .item {
    position: relative;
    z-index: 2;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px;
    text-align: center;
    box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
    border-radius: 45px;
  }
  
  .pricing-tables .item h4 {
    font-size: 20px;
    font-weight: 700;
    color: #2a2a2a;
  }
  
  .pricing-tables .item em {
    color: #ff695f;
    font-size: 15px;
    display: block;
    margin-top: 25px;
    text-decoration: line-through;
    font-style: normal;
  }
  
  .pricing-tables .item span {
    font-size: 44px;
    color: #ff695f;
    font-weight: 700;
    display: block;
    margin-top: -5px;
  }
  
  .pricing-tables .item ul {
    margin-top: 30px;
  }
  
  .pricing-tables .item ul li {
    display: block;
    font-size: 15px;
    color: #7a7a7a;
    margin-bottom: 20px;
  }
  
  .pricing-tables .item .main-blue-button {
    margin-top: 40px;
  }
  
  .pricing-tables .first-item {
    /* background-image: url(../images/first-plan-bg.png); */
  }
  
  .pricing-tables .second-item {
    /* background-image: url(../images/second-plan-bg.png); */
  }
  
  .pricing-tables .third-item {
    /* background-image: url(../images/third-plan-bg.png); */
  }
    
  