/* homebanner */

 .homebanner {
   /* background: linear-gradient(to right, #f0f8ff, #e6f2ff); */
   padding: 80px 0;
   overflow: hidden;
 }

 .homebanner h1 {
   font-size: 60px;
   font-weight: 700;
   color: #333;
   margin-bottom: 25px;
   text-align: left;
 }

 /* .homeimg{
  height: 400px;
} */

 .homebanner h1 span {
   color: #0d6efd;
 }

 .homebanner p {
   font-size: 1.1rem;
   line-height: 1.6;
   margin-bottom: 30px;
   text-align: justify;
 }

 .homebanner-btn {
   background-color: #0d6efd;
   color: white;
   padding: 12px 30px;
   border-radius: 30px;
   font-weight: 600;
   transition: all 0.3s ease;
   border: none;
 }

 .homebanner-btn:hover {
   background-color: #0b5ed7;
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(13, 110, 253, 0.3);
 }

 .homebanner-image {
   text-align: center;
 }

 @media (max-width: 991px) {
   .homebanner {
     padding: 50px 0;
     /* text-align: center; */
   }

   .homebanner-image {
     margin-top: 40px;
   }

   .homebanner h1 {
     font-size: 2.3rem;
   }
 }

 /* feature or benefits */

 /* benefits */
 .benefitsSection {
   padding: 50px 0;
   background-color: #f8f8f8;
 }

 .benefitsHeading {
   text-align: center;
   margin-bottom: 40px;
   font-weight: 600;
   color: #333;
   font-size: 45px;
 }

 .benefitsItem {
   display: flex;
   flex-direction: column;
   background-color: white;
   align-items: center;
   text-align: center;
   margin-bottom: 30px;
   border: 1px solid #ffe3e3;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   padding: 10px;
   color: black;
   transition: background-color 0.4s ease;
 }

 .benefitsItem:hover {
   background: #00AABF;
   background: linear-gradient(90deg, rgba(0, 170, 191, 1) 0%, rgba(87, 160, 199, 1) 100%);
 }

 .benefitsIconWrapper {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
 }

 .benefitsIcon {
   font-size: 24px;
   color: #555;
 }

 .benefitsTitle {
   font-weight: 600;
   margin-bottom: 10px;
   color: #333;
 }

 .benefitsDescription {
   font-size: 17px;
   color: #777;
   max-width: 250px;
   line-height: 1.5;
 }

 .benefitsItem:hover .benefitsTitle {
   color: #fff;
 }

 .benefitsItem:hover .benefitsDescription {
   color: #f0f0f0;
 }

 .benefitsItem:hover .benefitsIcon {
   color: #fff;
 }

 .benefitsItem:hover img {
   animation-name: flip;
   animation-duration: 1s;
   animation-fill-mode: both;
 }

 @keyframes flip {
   0% {
     transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
     animation-timing-function: ease-out;
   }

   40% {
     transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
     animation-timing-function: ease-out;
   }

   50% {
     transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
     animation-timing-function: ease-in;
   }

   80% {
     transform: perspective(400px) scale3d(.95, .95, .95);
     animation-timing-function: ease-in;
   }

   100% {
     transform: perspective(400px);
     animation-timing-function: ease-in;
   }
 }


 /* .benefitsBlue {
  background-color: #e6f7ff;
} */


 .benefitsPurple {
   background-color: #f6f3ff;
 }

 .benefitsGray {
   background-color: #f0f2f5;
 }

 /* free trail */

 .freecons-container {
   background-color: #f8f9fa;
   border-radius: 12px;
   padding: 0;
   margin: 2rem auto;
   max-width: 1000px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
   overflow: hidden;
 }

 .freecons-image-col {
   background-image: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
   background-size: cover;
   background-position: center;
   min-height: 300px;
 }

 .freecons-content-col {
   padding: 3rem;
 }

 .freecons-headline {
   font-size: 2.2rem;
   font-weight: 700;
   margin-bottom: 1.5rem;
   color: #333;
 }

 .freecons-subhead {
   font-size: 1.2rem;
   color: #666;
   margin-bottom: 2rem;
 }

 .freecons-btn {
   background-color: #FF6B35;
   border: none;
   padding: 0.8rem 2rem;
   font-size: 1.1rem;
   font-weight: 600;
   border-radius: 8px;
   transition: all 0.3s ease;
 }

 .freecons-btn:hover {
   background-color: #E55627;
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
 }

 .freecons-highlight {
   color: #FF6B35;
   font-weight: 600;
 }

 @media (max-width: 768px) {
   .freecons-image-col {
     min-height: 200px;
     order: -1;
   }

   .freecons-content-col {
     padding: 2rem;
   }

   .freecons-headline {
     font-size: 1.8rem;
   }

   .freecons-subhead {
     font-size: 1rem;
   }
 }