/*--------------------------------------------------------------------------------------
   1. BASE CSS
    2. TOP AREA
        2.1 MAINMENU AREA
        2.2 SIDE PUSH MENU AREA
        2.3 WELCOME TEXT AREA
    3. ABOUT AREA
    4. FEATURES AREA
    5. PRODUCT AREA
    6. CLIENT AREA
    7. SUBSCRIBER AREA
    8. CONTACT AREA
    8. GALLERY AREA
    9. VIDEO AREA
    10. FOOTER AREA
    11. SCROLL TO TOP
    12. PRELOADER
----------------------------------------------------------------------------------------*/

/*--------------------
   1. BASE CSS
----------------------*/

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700|Josefin+Sans:400,600,700");
.alignleft {
  float: left;
  margin-right: 15px;
}

.alignright {
  float: right;
  margin-left: 15px;
}

.aligncenter {
  display: block;
  margin: 0 auto 15px;
}

a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

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

button:focus {
  outline: 0;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 15px;
  /*font-family: 'Montserrat', sans-serif;*/
  font-family: "Josefin Sans", sans-serif;
  text-transform: capitalize;
}

html,
body {
  height: 100%;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  font-weight: 400;
  color: #494949;
}

a {
  color: #494949;
}

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

.navbar-header .collapse,
.navbar-toggle {
  border: 2px solid #009cde;
  border-radius: 0;
  margin-top: 23px;
}

.navbar-toggle .icon-bar {
  background: #009cde none repeat scroll 0 0;
}

/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

.area-title p {
  margin-bottom: 0;
}

.section-padding {
  padding: 100px 0;
}

.padding-top {
  padding-top: 100px;
}

.padding-bottom {
  padding-bottom: 100px;
}

.margin-bottom {
  margin-bottom: 50px;
}

.margin-top {
  margin-top: 50px;
}

.gray-bg {
  background: #f3f3f3;
  color: #5b5a5a;
}

.light-gradient-bg {
  background: rgba(0, 0, 0, 0) -webkit-radial-gradient(#009cde, #00b2da) repeat
    scroll 0 0;
  background: rgba(0, 0, 0, 0) radial-gradient(#009cde, #00b2da) repeat scroll 0
    0;
  color: #fff;
}

.dark-gradient-bg {
  background: -webkit-radial-gradient(
    circle farthest-side at center bottom,
    #009cde,
    #003087 125%
  );
  background: radial-gradient(
    circle farthest-side at center bottom,
    #009cde,
    #003087 125%
  );
  color: #fff;
}

.dark-gradient-bg .area-title:after {
  background: #009cde;
}

.dark-gradient-bg a {
  color: #fff;
}

/*--------------------------
    2. TOP AREA
---------------------------*/

.top-area {
  height: 100%;
  position: relative;
  width: 100%;
}

.top-area-bg {
  background: url("./img/agricultural-silos-building-exterior.jpg") no-repeat
    scroll center center / cover;
  height: calc(100% + 200px);
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.top-area-bg::after {
  content: "";
  height: 100%;
  left: 0;
  opacity: 0.5;
  position: absolute;
  top: 0;
  width: 100%;
}

/*---------------------------------
    2.1 MAINMENU AREA
-----------------------------------*/

.header-top-area {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999;
}

.mainmenu-area {
  position: relative;
  z-index: 9999;
}

.mainmenu-area-bg {
  background: #fff none repeat scroll 0 0;
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
  width: 100%;
}

.is-sticky .mainmenu-area-bg {
  box-shadow:
    0 0 4px rgba(0, 0, 0, 0.14),
    0 4px 8px rgba(0, 0, 0, 0.28);
  opacity: 1;
}

.navbar {
  border-bottom: 0 none;
  border-top: 0 none;
  backdrop-filter: blur(1px);
  background: #00000007;
  margin-bottom: 0;
  border-bottom: rgba(0, 0, 0, 0.027) 1px solid;
}

.navbar-header {
  margin-top: 25px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.is-sticky .navbar-header {
  margin-top: 6px;
}

.navbar-brand {
  padding: 0;
}

/* DESKTOP ONLY (>= 992px) */
@media (min-width: 992px) {
  .navbar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8rem;
    width: 100%;
  }
}

.navbar-brand > img {
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 85px;
}

a.navbar-brand {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: initial;
}

.navbar-brand {
  height: auto;
  margin-top: -6px;
}

ul#nav {
  float: right;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

ul#nav li {
  overflow: hidden;
  padding: 40px 15px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

ul#nav li a {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #ffffff;
  font-family: "Josefin Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 0;
  position: relative;

  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.is-sticky ul#nav li {
  padding: 20px 15px;
}

.is-sticky ul#nav li a {
  color: #000000;
}

ul#nav li a::before,
ul#nav li a::after {
  background: #009cde none repeat scroll 0 0;
  bottom: -13px;
  content: "";
  height: 2px;
  left: 0;
  opacity: 0;
  position: absolute;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 0%;
}

ul#nav li a::after {
  bottom: -9px;
  width: 0%;
}

ul#nav li.active a::before,
ul#nav li.active a::after {
  opacity: 1;
  width: 100%;
}

ul#nav li.active a::after {
  width: 50%;
}

ul#nav li:hover a::before,
ul#nav li:hover a::after {
  left: auto;
  opacity: 1;
  right: 0;
  width: 100%;
}

ul#nav li.active:hover a::before,
ul#nav li.active:hover a::after {
  left: 0;
}

ul#nav li:hover a::after {
  width: 50%;
}

.is-sticky .mainmenu-area {
  z-index: 99999;
}

.side-push-menu {
  color: #fff;
  float: right;
  height: 100px;
  padding-left: 20px;
  padding-top: 35px;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 60px;
}

.push-menu-open-button {
  background: #fff none repeat scroll 0 0;
  color: #009cde;
  cursor: pointer;
  font-size: 20px;
  height: 30px;
  padding-top: 3px;
  position: absolute;
  right: 0;
  text-align: center;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 40px;
}

.push-menu-open-button:hover {
  color: #ffffff;
  background: #009cde;
}

.push-menu-open-button::before {
  border-left: 1px dashed;
  content: "";
  height: 100%;
  left: -20px;
  position: absolute;
  top: 0;
  width: 1px;
}

.is-sticky .push-menu-open-button {
  background: #000 none repeat scroll 0 0;
}

.is-sticky .push-menu-open-button:hover {
  background: #009cde none repeat scroll 0 0;
}

.is-sticky .side-push-menu {
  padding-top: 15px;
  height: 60px;
}

.shoping-curt {
  color: #fff;
  float: right;
  font-size: 25px;
  height: 100px;
  padding: 35px;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 40px;
}

.is-sticky .shoping-curt {
  height: 60px;
  padding: 15px 35px;
  color: #000000;
}

.shoping-curt-button {
  cursor: pointer;
  height: 30px;
  left: 50%;
  margin-left: -15px;
  position: absolute;
  width: 30px;
}

.shoping-curt:hover .shoping-curt-button {
  color: #009cde;
}

.shoping-curt-button::after {
  background: #009cde none repeat scroll 0 0;
  border-radius: 50%;
  color: #fff;
  content: "2";
  font-size: 12px;
  height: 20px;
  line-height: 1.5;
  position: absolute;
  right: -10px;
  text-align: center;
  top: -10px;
  width: 20px;
}

.shoping-curt ul {
  background: #fff none repeat scroll 0 0;
  box-shadow: 0 3px 6px #333;
  font-size: 15px;
  list-style: outside none none;
  margin: 0;
  padding: 15px;
  position: absolute;
  right: 0;
  top: 100px;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 0 0 0;
  transform-origin: 0 0 0;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 250px;
  opacity: 0;
  z-index: 9;
}

.shoping-curt:hover ul {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  opacity: 1;
}

.cart-items > div {
  border-bottom: 1px dashed #009cde;
  padding: 15px 10px;
}

.cart-items > div:last-child {
  border-bottom: 0 none;
  padding: 0;
}

.cart-item {
  padding-left: 80px !important;
  position: relative;
}

.cart-img {
  left: 0;
  position: absolute;
  top: 5px;
  width: 70px;
}

.cart-content a {
  color: #494949;
}

.cart-content a:hover {
  color: #009cde;
}

.shoping-curt .total {
  height: 40px;
  margin-bottom: 20px;
  padding: 10px 0;
}

.cart-btn a {
  background: #494949 none repeat scroll 0 0;
  border-radius: 50px;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  letter-spacing: 2px;
  padding: 5px 10px;
  /* text-transform: uppercase; */
}

.cart-btn a:hover {
  background: #009cde none repeat scroll 0 0;
}

.cart-btn a:last-child {
  float: right;
}

.pull-right.cart-remove {
  color: #009cde;
  height: 15px;
  position: absolute;
  right: 0;
  width: 15px;
}

.pull-right.cart-remove:hover {
  color: red;
}

.cart-content span {
  display: block;
}

.is-sticky .shoping-curt ul {
  top: 60px;
}

/*-----------------------------------
    2.2 SIDE PUSH MENU AREA
------------------------------------*/

.push-menu-and-content {
  background: #272727 none repeat scroll 0 0;
  color: #fff;
  height: 100%;
  padding: 30px;
  max-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: fixed;
  right: -300px;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  z-index: 9999;
}

.push-menu-and-content.menu-open {
  right: 0;
}

.search-bar {
  margin-bottom: 30px;
}

.search-bar form {
  border: 1px solid #555;
  height: 35px;
  position: relative;
  width: 100%;
}

.search-bar form input {
  background: transparent none repeat scroll 0 0;
  border: 0 none;
  height: 100%;
  letter-spacing: 1px;
  padding: 5px;
  position: absolute;
  width: 100%;
}

.search-bar form button {
  background: #009cde none repeat scroll 0 0;
  border: 0 none;
  height: 35px;
  position: absolute;
  right: -1px;
  top: -1px;
  width: 40px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.search-bar form button:hover {
  background: #ffffff;
  color: #009cde;
}

.push-menu {
  margin-bottom: 40px;
}

.push-menu ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

.push-menu ul li {
  display: block;
}

.push-menu ul li a {
  color: #fff;
  display: block;
  font-size: 14px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 5px 0;
  /* text-transform: uppercase; */
}

.push-menu ul li a i {
  float: right;
}

.push-menu ul li a:hover,
.push-menu ul li a:focus {
  color: #009cde;
}

.push-menu-close {
  background: #009cde none repeat scroll 0 0;
  color: #fff;
  cursor: pointer;
  font-size: 35px;
  height: 40px;
  left: 0;
  padding-top: 3px;
  position: absolute;
  text-align: center;
  top: 24px;
  width: 40px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.push-menu-close:hover {
  background: #fff none repeat scroll 0 0;
  color: #009cde;
}

.push-menu-logo {
  margin-bottom: 40px;
  text-align: center;
}

.push-menu-logo img {
  max-width: 70%;
}

.smart-img-and-about-content {
  margin-bottom: 40px;
}

.smart-img-and-about-content img {
  margin-bottom: 30px;
}

.push-menu-and-content .smart-social-bookmark {
  margin-bottom: 20px;
}

.push-menu-and-content .smart-social-bookmark ul {
  text-align: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.push-menu-and-content .smart-social-bookmark ul li {
  display: inline;
}

.push-menu-and-content .smart-social-bookmark ul li a {
  color: #fff;
  display: inline-block;
  height: 30px;
  text-align: center;
  width: 30px;
}

.push-menu-and-content .smart-social-bookmark ul li a:hover {
  color: #009cde;
}

/*-----------------------------------
    2.3 WELCOME TEXT AREA
-------------------------------------*/

.welcome-text-area {
  -moz-box-pack: center;
  -ms-flex-line-pack: center;
  align-content: center;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-family: "Josefin Sans", sans-serif;
  font-size: 20px;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  line-height: 1.5em;
  padding-top: 100px;
  width: 100%;
}

.welcome-slider {
  padding: 0;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 50%;
}

.welcome-text h1,
.welcome-text h2 {
  font-weight: 700;
  line-height: 1;
  text-transform: capitalize;
}

.welcome-text h1 {
  font-size: 50px;
  letter-spacing: 2px;
  margin-bottom: 30px;
}

.welcome-text h1 span {
  color: #009cde;
}

.welcome-text h2 {
  font-size: 36px;
}

.call-to-action {
  display: flex;
  margin-bottom: 0;
  margin-top: 40px;
}

.call-to-action a {
  background: #fff none repeat scroll 0 0;
  border-radius: 50px;
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 15px 40px;
  /* text-transform: uppercase; */
}

.call-to-action a:hover {
  background: -webkit-radial-gradient(
    circle farthest-side at center bottom,
    #009cde,
    #003087 125%
  );
  background: radial-gradient(
    circle farthest-side at center bottom,
    #009cde,
    #003087 125%
  );
  color: #ffffff;
}

.swiper-container {
  padding-left: 8.8%;
  padding-top: 100px;
  text-align: right;
  width: 100%;
}

.swiper-slide {
  height: auto;
  padding: 0 15px;
  width: 390px;
}

.swiper-slide img {
  margin: 0 auto;
}

/*-----------------------------
    3. ABOUT AREA
-------------------------------*/

.row.top-promo {
  margin: 0;
}

.row.top-promo > .col-lg-3 {
  padding: 0;
}

.single-promo {
  margin-bottom: 50px;
  min-height: 260px;
  overflow: visible;
  -webkit-perspective: 800px;
  perspective: 800px;
  position: relative;
  text-align: center;
}

.promo-icon-and-title,
.promo-details {
  background: -webkit-radial-gradient(
    circle farthest-side at center bottom,
    #009cde,
    #003087 125%
  );
  background: radial-gradient(
    circle farthest-side at center bottom,
    #009cde,
    #003087 125%
  );
  box-shadow: 0 0 3px;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  left: 0;
  overflow: hidden;
  padding: 20px;
  position: absolute;
  text-align: center;
  top: 0;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  width: 100%;
}

.promo-details > img {
  opacity: 0.5;
  position: absolute;
  right: -100%;
  top: 0;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  z-index: -1;
}

.single-promo:hover .promo-details > img {
  right: -37%;
}

.promo-details {
  opacity: 0;
  /* -webkit-transform: translateY(150px) rotateX(-90deg);
    transform: translateY(150px) rotateX(-90deg);*/
  z-index: 1;
}

.single-promo:hover .promo-icon-and-title {
  opacity: 0;
  /* -webkit-transform: translateY(-150px) rotateX(90deg);
    transform: translateY(-150px) rotateX(90deg);*/
}

.single-promo:hover .promo-details {
  opacity: 1;
  /*-webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);*/
}

.single-promo:hover .promo-icon,
.single-promo:hover h3 {
  color: #fff;
}

.promo-icon {
  font-size: 60px;
  height: 80px;
  margin: 0 auto 20px;
  padding-top: 30px;
  position: relative;
  text-align: center;
  width: 80px;
}

.single-promo h3 {
  font-size: 24px;
  letter-spacing: 2px;
}

.about-flow-content {
  text-align: center;
}

.about-content h3 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 30px;
}

.about-content h3 span {
  font-weight: 300;
}

.about-flow-menu {
  margin-bottom: 30px;
  margin-top: 30px;
}

.about-flow-menu ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

.about-flow-menu ul li {
  display: inline;
}

.about-flow-menu ul li a {
  display: inline-block;
  margin-right: 10px;
  background: white;
  max-width: 170px;
  min-height: 142px;
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.about-flow-menu ul li a:hover {
  transform: scale(1.08);
  background: #8d8d8dd3;
}

.about-flow-menu ul li a img {
  min-height: 100px;
  padding: 15px;
  min-width: 160px;
}

.about-right {
  float: right;
}

.about-left {
  float: right;
}

/*----------------------------
    4. FEATURES AREA
-----------------------------*/

.features-area {
  overflow: hidden;
  counter-reset: features;
}

.row.features-list {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
}
.features-list .single-features {
  border: 1px solid #e5e5e5;
  padding: 30px 20px;
  min-height: 110px; /* Adjust height as needed */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centers content vertically */
  align-items: center; /* Centers horizontally */
  width: 100%; /* Equal width within column */
  box-sizing: border-box;
}
.features-list .col-md-4 {
  display: flex;
  flex-direction: column;
}

.area-title-icon {
  color: #009cde;
  font-size: 80px;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  width: 80px;
}

.area-title h2 {
  font-size: 36px;
  letter-spacing: 2px;
  display: inline-block;
  line-height: 1;
  margin-bottom: 31px;
  padding-bottom: 15px;
  position: relative;
}

.area-title h2 span {
  font-weight: 700;
}

.area-title h2::after,
.area-title h2::before {
  background: #009cde;
  bottom: -5px;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -50px;
  position: absolute;
  width: 100px;
}

.area-title h2::before {
  bottom: 3px;
  margin-left: -25px;
  width: 50px;
}

.area-title {
  margin-bottom: 80px;
}

.single-features {
  border: 2px solid #ebebeb;
  box-sizing: border-box;
  margin-bottom: 30px;
  margin-top: 20px;
  padding: 20px 20px 20px 100px;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.features-icon {
  height: 100px;
  left: 0;
  padding-top: 30px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100px;
}

.features-icon {
  color: #009cde;
  font-size: 60px;
  height: 100px;
  left: 0;
  padding-top: 47px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100px;
}

.single-features h3 {
  font-size: 20px;
  text-transform: capitalize;
}

.single-features:hover {
  box-shadow: 0 0 39px #ebebeb;
}

.features-img {
  position: relative;
  width: 100%;
}

.features-img img {
  display: block;
  margin: 0px auto 0;
}

.features-img ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

.features-logo {
  margin-top: 60%;
}

.product-img-size {
  max-width: 750px;
  width: 100%;
  height: auto;
}

/*----------------------------
    5. PRODUCT AREA
------------------------------*/
/* ===========================
   PRODUCTS SECTION – NISHYOGA
   =========================== */

.solutions-section {
  padding: 90px 0 80px;
  background:
    radial-gradient(circle at top left, #e4f7ff 0%, #e4f7ff 45%),
    radial-gradient(circle at bottom right, #d5f1ff 0%, #e4f7ff 50%);
}

/* ==========================
   CONTAINER + HEADER
==========================*/
.solutions-container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

.solutions-header {
  text-align: center;
  max-width: 680px;
  margin: auto;
  margin-bottom: 45px;
}

.solutions-header h2 {
  font-size: 36px;
  font-weight: 800;
  color: #103043;
}

.solutions-header h2 span {
  color: #009cde;
}

.solutions-header p {
  font-size: 16px;
  color: #59727f;
  margin-top: 10px;
}

/* ==========================
   GRID LAYOUT
==========================*/
.solutions-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* ==========================
   CARD STYLE
==========================*/
.solution-card {
  background: #fff;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  min-height: 570px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: 0.25s;
}

.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

/* ==========================
   IMAGE
==========================*/
.solution-img-box {
  position: relative;
  padding: 20px 20px 0;
  background: linear-gradient(135deg, #009cde 0%, #34c9ff 55%, #b9f0ff 100%);
}

.solution-img-box img {
  display: block;
  margin: auto;
  min-height: 180px;
  max-height: 180px;
  object-fit: contain;
}

/* BADGE */
.solution-badge {
  position: absolute;
  left: 24px;
  top: 22px;
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #009cde;
}

/* ==========================
   CONTENT
==========================*/
.solution-content {
  padding: 18px 22px 10px;
  flex: 1;
}

.solution-title {
  font-size: 24px;
  font-weight: 700;
  color: #103043;
  margin-bottom: 6px;
}

.solution-desc {
  font-size: 16px;
  color: #59727f;
  font-weight: 600;
  margin-bottom: 10px;
}

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

.solution-list li {
  margin-bottom: 4px;
  padding-left: 16px;
  font-size: 16px;
  color: #35515f;
  position: relative;
}

.solution-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #009cde;
}

/* ==========================
   FOOTER BUTTON
==========================*/
.solution-footer {
  padding: 14px 22px 20px;
  border-top: 1px solid #eef4f8;
}

.solution-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 22px;
  border-radius: 50px;
  background: linear-gradient(135deg, #009cde 0%, #34c9ff 70%);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(0, 156, 222, 0.3);
  transition: 0.2s;
}

.solution-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 156, 222, 0.35);
  background: radial-gradient(circle at bottom, #009cde, #003087);
}

/* ==========================
   RESPONSIVE
==========================*/
@media (max-width: 767px) {
  .solutions-section {
    padding: 70px 0 60px;
  }
  .solutions-header h2 {
    font-size: 28px;
  }
  .solutions-grid {
    gap: 25px;
  }
  .solution-img-box img {
    max-height: 160px;
  }
}

/*-----------------------------
    6. CLIENT AREA
------------------------------*/

.client-area .owl-carousel .owl-item img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: auto;
}

/*-----------------------------
    7. SUBSCRIBER AREA
------------------------------*/
/* ===== CTA SECTION ===== */
.cta-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh; /* vertical centering */
  padding: 60px 15px;
  background: #009cde;
  overflow: hidden;
}

/* concentric circle effect on the right */
.cta-section::after {
  content: "";
  position: absolute;
  right: -150px;
  top: 50%;
  transform: translateY(-50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #e0f6ff 0, #e0f6ff 30%, transparent 31%),
    radial-gradient(circle at 50% 50%, #8ed8ff 0, #8ed8ff 52%, transparent 53%),
    radial-gradient(circle at 50% 50%, #42c1ff 0, #42c1ff 72%, transparent 73%);
  opacity: 0.9;
  pointer-events: none;
}

/* content wrapper */
.cta-inner {
  position: relative; /* keep above circles */
  z-index: 1;
  color: #ffffff;
}

/* text styles */
.cta-pre-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 10px;
}

.cta-title {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 15px;
}

.cta-subtitle {
  font-size: 16px;
  max-width: 520px;
  margin: 0 auto 30px;
  opacity: 0.95;
}

/* button group */
.cta-btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

/* pill buttons with “knob” */
.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 230px;
  padding: 14px 28px;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

/* hover/active states */
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.45);
  background: #5b5a5a;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px) {
  .cta-section {
    min-height: 50vh;
    padding: 50px 15px;
  }

  .cta-section::after {
    width: 420px;
    height: 420px;
    right: -180px;
  }

  .cta-title {
    font-size: 2rem;
  }
}

@media (max-width: 767.98px) {
  .cta-section {
    min-height: auto;
    padding: 40px 15px 50px;
  }

  .cta-section::after {
    width: 360px;
    height: 360px;
    right: -220px;
    opacity: 0.7;
  }

  .cta-title {
    font-size: 1.7rem;
  }

  .cta-pre-title {
    font-size: 1rem;
  }

  .cta-btn {
    min-width: 190px;
    padding: 12px 22px;
    font-size: 0.9rem;
  }
}

/*-----------------------------
    8. CONTACT AREA
------------------------------*/

.contact-form-area {
  border: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}

.contact-form-area .modal-header {
  background: #009cde;
  padding: 25px 20px;
  border-bottom: none;
  position: relative;
  text-align: center;
}

.contact-form-area .modal-header .close {
  position: absolute;
  right: 20px;
  top: 20px;
  color: #fff;
  opacity: 0.8;
  text-shadow: none;
  font-size: 24px;
}

.contact-form-area .modal-title {
  color: #fff;
  font-family: "Josefin Sans", sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0;
}

.contact-form-area .modal-body {
  padding: 30px;
}

.contact-form .form-control {
  border: 1.5px solid #009cde;
  border-radius: 4px;
  padding: 15px;
  height: 55px;
  font-size: 16px;
  color: #444;
  box-shadow: none;
  transition: all 0.3s ease;
  margin-bottom: 20px;
  background: #fff;
}

.contact-form .form-control::placeholder {
  color: #999;
  font-family: "Josefin Sans", sans-serif;
}

.contact-form textarea.form-control {
  height: 160px;
  resize: none;
}

.contact-form .form-control:focus {
  border-color: #007bb1;
  box-shadow: 0 0 10px rgba(0, 156, 222, 0.1);
}

.contact-form button[type="submit"] {
  background: #009cde;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 15px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1.5px;
  width: 100%;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.contact-form button[type="submit"]:hover {
  background: #003087;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.contact-form button[type="submit"] i {
  font-size: 20px;
}

.contact-form .help-block {
  font-size: 13px;
  color: #ff4d4d;
  margin-top: -15px;
  margin-bottom: 15px;
  display: block;
}

.has-error .form-control {
  border-color: #ff4d4d !important;
}

/*-----------------------------
    10. FOOTER AREA
------------------------------*/

.footer-area ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

.footer-area a {
  color: #5b5a5a;
}

.footer-area a:hover {
  color: #009cde;
}

.single-footer-widget h4 {
  font-size: 20px;
  letter-spacing: 2px;
  margin-bottom: 40px;
  padding-bottom: 15px;
  position: relative;
}

.single-footer-widget h4::after,
.single-footer-widget h4::before {
  background: #009cde none repeat scroll 0 0;
  bottom: -4px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 70px;
}

.single-footer-widget h4::before {
  bottom: 3px;
  width: 35px;
}

.footer-area .row > div:first-child h4 {
  margin-bottom: 10px;
}

.footer-area .row > div:first-child h4::after,
.footer-area .row > div:first-child h4::before {
  display: none;
}

.footer-logo {
  margin-bottom: 10px;
}

.footer-area ul li {
  display: block;
  margin-bottom: 15px;
  padding-left: 40px;
  position: relative;
}

.f_contact_icon {
  font-size: 24px;
  left: 0;
  position: absolute;
}

.footer-area ul li a {
  display: block;
}

ul.footer-list li {
  margin-bottom: 5px;
  padding: 5px 5px 5px 31px;
  position: relative;
}

.footer-area ul li a i {
  font-size: 20px;
  left: 4px;
  padding-right: 5px;
  position: absolute;
  top: 8px;
}

.footer-bottom-area {
  padding: 15px 0;
}
.footer-copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* keeps layout clean on mobile */
  gap: 10px;
  padding: 8px 0;
}

/* text and link style */
.footer-copyright p,
.footer-copyright a {
  margin: 0;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.5px;
}

.footer-copyright a:hover {
  color: #dfdfdf;
}

.footer-copyright a span {
  font-weight: 600;
}

/* Mobile – center automatically */
@media (max-width: 768px) {
  .footer-copyright {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 6px;
  }
}

/*-----------------------------
    12. PRELOADER
------------------------------*/

.preloader-spinner {
  border: 5px solid #009cde;
}

/*-----------------------------
    HOME CAROUSEL VERSION
-------------------------------*/

.home-carousel .top-area-bg,
.home-features .top-area-bg {
  background: url("./img/agricultural-silos-building-exterior.jpg") no-repeat
    fixed center center / cover;
}

.home-carousel .home-slider {
  padding-top: 100px;
}

.home-carousel .home-slider .owl-item img {
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 400px;
  min-width: 400px;
  width: auto;
}

.home-carousel .shoping-curt,
.home-carousel .welcome-text,
.home-features ul#nav li a,
.home-features .shoping-curt,
.home-features .welcome-text {
  color: #0e0e0e;
}

.home-carousel ul#nav li a {
  color: #000;
}
.home-carousel .call-to-action a,
.home-features .call-to-action a {
  background: linear-gradient(135deg, #009cde 0%, #34c9ff 70%);
  color: #fff;
}

.home-carousel .call-to-action a:hover,
.home-features .call-to-action a:hover {
  background: rgba(0, 0, 0, 0) -webkit-radial-gradient(
      circle farthest-side at center bottom,
      #009cde,
      #003087 125%
    )
    repeat scroll 0 0;
  background: rgba(0, 0, 0, 0)
    radial-gradient(
      circle farthest-side at center bottom,
      #009cde,
      #003087 125%
    )
    repeat scroll 0 0;
}

.heading-slider {
  position: relative;
  overflow: hidden;
  height: 100px;
}

.heading-slide {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: 0.6s;
}

.heading-slide.active {
  opacity: 1;
  transform: translateY(0);
}

/*-----------------------*/

.home-features .welcome-text-area {
  text-align: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  overflow: hidden;
}

.home-features .welcome-text-area {
  color: #494949;
}

.home-features .welcome-text-area h1 {
  font-weight: 700;
}

.home-features .top-area-bg {
  height: 100%;
}

.top-area-bg.video-bg {
  background: transparent none repeat scroll 0 0;
  height: 100%;
}

.top-area-bg.video-bg::after {
  background: #fff none repeat scroll 0 0;
  opacity: 0.6;
}

/* TESTIMONIALS */
.testimonials-section {
  background: var(--bg-light);
}

.testimonial-card {
  background: #f5f5f5;
  border-radius: var(--radius-lg);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-soft);
  font-size: 0.85rem;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 20px;
}

.testimonial-stars {
  color: #ffc857;
  margin-bottom: 6px;
  font-size: 1.8rem;
}

.testimonial-text {
  color: var(--muted);
  margin-bottom: 0.75rem;
  font-size: 15px;
}

.testimonial-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--primary-dark);
}

.testimonial-role {
  font-size: 15px;
  color: var(--muted);
}

/* Contact Form Alert Messages */
.form-message {
    display: none;
    padding: 14px 18px;
    border-radius: 6px;
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.6;
}

.form-message.success {
    background-color: #d4edda;
    border: 1px solid #28a745;
    color: #155724;
}

.form-message.error {
    background-color: #f8d7da;
    border: 1px solid #dc3545;
    color: #721c24;
}