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

        Template Name: Weather Mate - Accurate Weather Forecasts and Climate Updates
        Description: Weather Mate provides accurate weather forecasts, live updates, climate change insights, and much more. Stay prepared with our detailed reports and analysis.
        Author: Lucid Solutions
        Author URL: https://www.templatemonster.com/store/lucid_solutions/
        Version: 1.0.0

    -----------------------------------------------------------------

        CSS INDEX
        ==================

       
        01.   Basic Styles
        02.   Preloader Style 
        03.   Theme Switcher 
        04.   Header, Navigation Section Styles
        05.   Hero Banner Section Styles
        06,   About Page Styles
        07.   News Page Styles
        08.   News Page Details Styles
        08.   Forecaste Page Styles
        09.   Climate Change Page Styless
        10.   Contact Section Styles
        11.   Back to top Styles
     
    
  
----------------------------------------------------------------*/

@import url('css2.css');


/* ==================
   Basic Styles 
================== */

[data-theme="wm_light"] {
  --body-color: #FFFFFF;
  --primary-gradient: linear-gradient(to bottom, #AD2F87 0%, #2E2070 100%);
  --secondary-gradient: linear-gradient(to bottom, rgba(62, 45, 143), rgba(157, 82, 172, 0.7));
  --button-gradient: linear-gradient(to bottom, #FD7600 0%, #FFA805 100%);
  --primary-color: #ff8418;
  --primary-shade: 255, 132, 24;
  --secondary-color: #2E2070;
  --color-3: #3E2D8F;
  --color-5: #FD7600;
  --secondary-overlay: 46, 32, 112;
  --alt-color: #FBF8FF;
  --white-color: #ffffff;
  --form-color: #EAEAEA;
  --card-color: #ffffff;
  --danger-color: #fa5050;
  --water-wave: #d5c1e9;

  /* text-colors */
  --heading-text: #3E2D8F;
  --bread-crumb-text: linear-gradient(to bottom, #FD7600 0%, #FFA805 100%);
  --secondary-text: #AD2F87;
  --para-text: #6B6B6B;
  --white-text: #ffffff;
  --form-text: #6B6B6B;
  --danger-text: #fa5050;

  /* font family */
  --primaryfont: "Roboto", sans-serif;
}

[data-theme="wm_dark"] {
  --body-color: #080213;
  --primary-gradient: linear-gradient(to bottom, #AD2F87 0%, #2E2070 100%);
  --secondary-gradient: linear-gradient(to bottom, rgba(62, 45, 143), rgba(157, 82, 172, 0.7));
  --button-gradient: linear-gradient(to bottom, #FD7600 0%, #FFA805 100%);
  --primary-color: #ff8418;
  --primary-shade: 255, 132, 24;
  --secondary-color: #2E2070;
  --color-3: #614acf;
  --color-5: #FD7600;
  --secondary-overlay: 46, 32, 112;
  --alt-color: #1D1334;
  --white-color: #ffffff;
  --form-color: #362462;
  --card-color: #322355;
  --danger-color: #fa5050;
  --water-wave: #606199;

  /* text-colors */
  --heading-text: #ffffff;
  --bread-crumb-text: linear-gradient(to bottom, #FD7600 0%, #FFA805 100%);
  --secondary-text: #AD2F87;
  --para-text: #E4E4E4;
  --white-text: #ffffff;
  --form-text: #C8C8C8;
  --danger-text: #fa5050;

  /* font family */
  --primaryfont: "Roboto", sans-serif;
}

.primary-text {
  color: var(--bread-crumb-text) !important;
  background: linear-gradient(to right, #FD7600, #FFA805);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

* {
  box-sizing: border-box;
  font-family: var(--primaryfont) !important;
  word-break: break-word;
}

html {
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
  box-shadow: none;
  outline: none;
}

a:hover {
  text-decoration: none;
}

.fs-0 {
  font-size: 0px;
}

/* Background-Color*/

.body-color {
  background-color: var(--body-color) !important;
}

.primary-gradient {
  background: var(--primary-gradient) !important;
}

.secondary-gradient {
  background: var(--secondary-gradient)
}

.primary-color {
  background-color: var(--primary-color) !important;
}

.secondary-color {
  background-color: var(--secondary-color) !important;
}

.secondary-overlay {
  background-color: var(--secondary-overlay) !important;
}

.alt-color {
  background-color: var(--alt-color) !important;
}

.white-color {
  background-color: var(--white-color) !important;
}

.form-color {
  background-color: var(--form-color) !important;
}

.card-color {
  background-color: var(--card-color) !important;
}

.danger-color {
  background-color: var(--danger-color) !important;
}

/* Text-Color*/

.primary-font {
  font-family: var(--primaryfont) !important;
}

.color-3 {
  background-color: var(--color-3);
}

.color-5 {
  color: var(--color-5);
}

.heading-text {
  color: var(--heading-text);
}

.para-text {
  color: var(--para-text);
}

.white-text {
  color: var(--white-text);
}

.form-text {
  color: var(--form-text);
}

.secondary-text {
  color: var(--secondary-text);
}

.danger-text {
  color: var(--danger-text);
}

.bread-crumb-text {
  color: var(--bread-crumb-text) !important;
}

/* Button Style */

.primary-btn {
  background: var(--button-gradient) !important;
  color: var(--white-text);
  padding: 14px 30px;
  font-size: 18px;
}

.primary-btn:hover {
  background: var(--primary-gradient) !important;
  color: var(--white-color) !important;
  padding: 14px 30px;
  font-size: 18px;
  transition: 0.5s ease-in;
}

.outline-btn {
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  padding: 14px 30px;
  font-size: 18px;
}

.outline-btn:hover {
  background: var(--primary-gradient) !important;
  color: var(--white-color) !important;
  padding: 14px 30px;
  font-size: 18px;
  border: none;
  transition: 0.5s ease-in;
}

.mx-70 {
  max-width: 750px;
}

.paragraph-width {
  width: 768px;
  max-width: 100%;
}

/* ==================
  Preloader Style
================== */

.preloader {
  position: fixed;
  height: 100vh;
  overflow: hidden !important;
  width: 100%;
  z-index: 9999 !important;
  background-color: var(--secondary-color);
}

.preloader-img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* ==================
  Theme Switcher
================== */
.switchbtn {
  position: fixed;
  top: 150px;
  right: -1px;
  z-index: 99;
  border-radius: 5px 0 0 5px !important;
  padding: 15px !important;
}

/* ==================
  Header, Navigation Section Styles
================== */

.nav-link:hover,
.nav-link.active,
.nav-link:focus {
  color: var(--primary-color) !important;
  box-shadow: none;
}

.navbar-nav .nav-link {
  position: relative;
  padding-bottom: 5px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--primary-color);
}

.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  width: 100%;
}

@media(max-width:1199px) {

  .nav-link {
    padding-top: 30px;
  }

  /* .primary-btn{
  margin-top: 30px;
} */
}

.offcanvas-header .btn-close {
  background-color: var(--primary-color);
  color: var(--white-color);
  padding: 10px;
  ;
  background-image: unset;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* ==================
  Hero Banner Section Styles
================== */

.hero {
  background: linear-gradient(0deg, rgba(var(--secondary-overlay), 0.9), rgba(var(--secondary-overlay), 0.5)),
    url(../image/hero_bg.webp) no-repeat;
  background-size: cover;
}

.breadcrumb-bg {
  background: linear-gradient(to right, #360728, #191239);
  background-size: cover;
}

@media (min-width: 1024px) {
  .hero p {
    max-width: 60%;
  }
}

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

.hero .hero-waves {
  display: block;
  width: 100%;
  height: 60px;
  position: relative;
}

.hero .wave1 use {
  animation: move-forever1 10s linear infinite;
  animation-delay: -2s;
  fill: var(--water-wave);
  opacity: 0.6;
}

.hero .wave2 use {
  animation: move-forever2 8s linear infinite;
  animation-delay: -2s;
  fill: var(--water-wave);
  opacity: 0.4;
}

.hero .wave3 use {
  animation: move-forever3 6s linear infinite;
  animation-delay: -2s;
  fill: var(--water-wave);
}

@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

.animated-image {
  width: 100%;
  max-width: 600px;
  /* Adjust based on your desired image width */
  animation: upDown 3s infinite alternate ease-in-out;
}

@keyframes upDown {
  0% {
    transform: translateY(0);
    /* Start at original position */
  }

  50% {
    transform: translateY(-20px);
    /* Move up */
  }

  100% {
    transform: translateY(0);
    /* Move back down */
  }
}

/* ==================
  About Section Styles
================== */

.grid-wrapper {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  grid-auto-rows: 180px;
  grid-auto-flow: dense;
}

.grid-wrapper .big {
  /* grid-column: span 3; */
  grid-row: span 2;
}

.grid-wrapper>div {
  display: flex;
  justify-content: center;
}

.zoom-image {
  width: 100%;
  transition: transform 0.5s ease;
  /* Smooth transition */
}

.zoom-image:hover {
  transform: scale(0.9);
  /* Zoom in effect */
}

/* ==================
   Today's Weather Forecast Section Styles
================== */
/* ------------------------------------------------------ */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #8f2b81;
  /* padding: 15px; */
}

.form-control {
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: none !important;
  margin-bottom: 15px;
}

.select2.select2-container {
  width: 100% !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 0;
  outline: 0;
  box-shadow: unset;
}

.select2-container .select2-selection--single {
  height: 50px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 50px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 50px;
  display: flex;
  align-items: center;

}

.select2-selection__rendered {
  text-align: start;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: unset;
  border-style: unset;
}

.select2-selection__arrow::after {
  content: '\f107';
  font-family: 'FontAwesome';
}

.select2-container--default .select2-selection--single {
  background-color: unset;
  border: 1px solid #ffffff;
  border-radius: 4px;
  color: #ffffff;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #ffffff;
}


.sun-icon {
  animation: rotate-smooth 9s linear infinite;
  padding: 20px;
}

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

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

.weather-icon {
  animation: zoomInOut 2s infinite ease-in-out;
}

@keyframes zoomInOut {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.7);
  }
}

.weather-section {
  padding: 3rem 1rem;
  text-align: center;
}

.weather-section .container {
  min-height: 700px;
}

.ws-img:nth-child(1) {
  transform: rotate(18deg);
  z-index: 2;
}

.ws-img:nth-child(2) {
  transform: rotate(-18deg);
  z-index: 2;
}

@media(max-width:1199px) {
  .ws-img:nth-child(1) {
    transform: rotate(18deg);
    top: -120px !important;
    right: 30px !important;
  }
}

@media(max-width:991px) {
  .ws-img:nth-child(2) {
    bottom: -65px !important;
    z-index: 2;
  }
}

.forecast-tab {
  padding: 1rem;
}

.forecast-item {
  text-align: center;
}

.forecast-item img {
  height: 50px;
  margin-bottom: 0.5rem;
}

.forecast-item p {
  margin: 0;
  font-size: 1rem;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 15px;
  padding-left: 40px;
  font-size: 14px;
  border: 1px solid var(--white-color);
  border-radius: 5px;
  outline: none;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--color-5);
  box-shadow: none;
}

.form-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--white-color);
}

.btn-highlight {
  background-color: #ff9100;
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 20px;
}

.example-class {
  font-size: 16px;
  color: #333;
}


/* ==================
   Weekly Weather History Section Styles
================== */

.icon {
  width: 150px;
  height: 150px;
  line-height: 150px;
  align-items: center;
  text-align: center;
}

.weather-icon {
  animation: zoomInOut 2s infinite ease-in-out;
}

@keyframes zoomInOut {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.7);
  }
}

.weekly-weather .weather-card {
  position: relative;
  overflow: hidden;
}

.weekly-weather .weather-card::after {
  content: '';
  width: 100%;
  height: 100%;
  bottom: 100%;
  left: 0;
  background-image: var(--primary-gradient);
  position: absolute;
  z-index: 0;
  opacity: 0;
  transition: 0.3s ease;
}

.weekly-weather .weather-card .card-inner {
  position: relative;
  z-index: 2;
}
.weekly-weather .weather-card:hover::after, .weather-card.active::after{
  opacity: 1;
  bottom: 0;
} 
.weekly-weather .weather-card:hover p, .weather-card.active p {
  color: white !important;
}

/* ==================
   Recent Search Weather Section Styles
================== */

.slick-initialized .slick-slide {
  color: #FFF;
  margin: 0 15px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slick-next,
.slick-prev {
  z-index: 5;
}

.slick-next {
  right: 15px;
}

.slick-prev {
  left: 15px;
}

.slick-next:before,
.slick-prev:before {
  color: var(--card-color);
  font-size: 26px;
}

.slick-slide {
  outline: none;
}

.slick-prev,
.slick-next {
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  width: 35px;
  height: 35px;
}

.img-overlay {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.img-overlay img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.img-overlay:hover img {
  transform: scale(1.1);
}

.img-overlay .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(var(--secondary-overlay), 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}

.img-overlay:hover .overlay {
  opacity: 1;
}

.img-overlay .overlay .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.slick-arrow {
  background: var(--card-color) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.slick-next {
  /* border-radius: 50%; */
  box-shadow: unset;
  width: 35px;
  height: 35px;
  /* bottom: -70px;
  top: unset; */
  right: -10px !important;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}

.slick-prev {
  /* border-radius: 50%; */
  box-shadow: unset;
  width: 25px;
  height: 25px;
  /* bottom: -70px;
  top: unset; */
  /* right: 60px !important; */
  left: -20px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.slick-next::before {
  content: '\f054';
  font-family: 'FontAwesome';
  font-size: 20px;
  color: var(--heading-text) !important;
}

.slick-prev::before {
  content: '\f053';
  font-family: 'FontAwesome';
  font-size: 20px;
  color: var(--heading-text) !important;

}

.btn-close.contact-msg {
  background: unset;
}

/* ==================
   Top Weather Forecast Section Styles
================== */

/* Card Styling */
.forecast-card {
  padding: 2rem 1rem;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.forecast-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.city-card {
  background-color: #fff;
  width: 150px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

/* ==================
   Weather Highlights Section Styles
================== */

.blog-section {
  padding: 4rem 1rem;
  background-color: #fff;
}

.blog-card {
  border: none;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.2);
}

.blog-card img {
  height: 200px;
  object-fit: cover;
}

.blog-card .card-body {
  padding: 1.5rem;
}

/* ==================
   Contact Section Styles
================== */

.contact-iconbg {
  min-width: 50px;
  min-height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: var(--alt-bg); */
  background-color: white;
  outline: 2px dashed #ffffff;
  outline-offset: 6px;
}

.form-control:focus {
  border-color: var(--color-5) !important;
  box-shadow: 0 0 5px var(--border-color-light);
  color: var(--form-text);
}

.form-control {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--form-text) !important;
}

.form-control::placeholder {
  color: var(--form-text);
}

.error {
  color: var(--danger-text) !important;
  padding: 8px;
  font-family: var(--secondaryfont) !important;
}

/* ==================
   Subscribe Section Styles
================== */

.input-group button {
  top: 4px;
  right: 4px;
  z-index: 9 !important;
}

.input-group input {
  padding: 20px 150px 20px 20px !important;
}

/* ==================
   City Slider Section Styles
================== */

.item-img {
  position: relative;
  text-align: center;
}

.item-img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--secondary-overlay);
  color: white;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

.city-slider {
  width: 100%;
  margin: 20px auto;
}

.slide-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.slide-item img {
  width: 100%;
  height: auto;
  display: block;
}

.slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.city-slider .slick-arrow {
  background-image: var(--primary-gradient) !important;
  border-radius: 20% !important;
  width: 40px !important;
  height: 40px !important;
  display: flex;
  align-items: center;
  justify-content: center;

}

.city-slider .slick-next {
  border-radius: 20%;
  box-shadow: unset;
  width: 35px;
  height: 35px;
  bottom: -70px;
  top: unset;
  right: 10px !important;
  left: unset;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.city-slider .slick-prev {
  border-radius: 20%;
  box-shadow: unset;
  width: 25px;
  height: 25px;
  bottom: -70px;
  top: unset;
  right: 60px !important;
  left: unset;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.city-slider .slick-next::before {
  content: '\f054';
  font-family: 'FontAwesome';
  font-size: 20px;
  color: var(--white-text) !important;

}

.city-slider .slick-prev::before {
  content: '\f053';
  font-family: 'FontAwesome';
  font-size: 20px;
  color: var(--white-text) !important;
}


/* ==================
  Footer Section Styles
================== */

.footer-section {
  background: linear-gradient(0deg, rgba(var(--secondary-overlay), 0.9), rgba(var(--secondary-overlay), 0.5)),
    url(../image/Footer-bg.webp) no-repeat;
  background-size: cover;
}

.footer-links a:hover,
.footer-links a.active,
.footer-links a:focus {
  color: var(--primary-color) !important;
  box-shadow: none;
  transition: 0.3s ease;
}

.footer-links a {
  position: relative;
  padding-bottom: 5px;
}

.footer-links a:hover,
.footer-links.active {
  color: var(--primary-color);
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

.footer-links a:hover::after,
.footer-links.active::after {
  width: 100%;
}

.footer-social-links {
  background-color: var(--card-color);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 500ms ease;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  margin-right: 15px;
  font-size: 20px;
  color: var(--para-text);
  transition: 0.5s;
}

.footer-social-links:hover {
  background: linear-gradient(to bottom, #FD7600 0%, #FFA805 100%);
  color: var(--white-color);
  transition: 0.5s;
}

/* ==================
  Back to top Styles
================== */

#backtotop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  border-radius: 50%;
  border: 2px dotted var(--white-color);
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: move 1.1s infinite ease-in-out;
  transition: 0.9s ease;
}

/* Arrow icon styling */
#backtotop .fa-angle-up {
  font-size: 30px;
  color: white;
  animation: upDown 1s ease-in-out infinite;
}

/* Keyframes for up-down animation */
@keyframes upDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
    /* Adjust this value to control movement */
  }
}

#backtotop:hover {
  cursor: pointer;
}

#backtotop.show {
  opacity: 1;
  visibility: visible;
}

.input-group .error:not(.form-control) {
  position: absolute;
  top: 100%;
}


/* ==================
  About Page Styles
================== */

.grid-wrapper {
  display: grid;
  grid-gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  grid-auto-rows: 180px;
  grid-auto-flow: dense;
}

.grid-wrapper .big {
  /* grid-column: span 3; */
  grid-row: span 2;
}

.grid-wrapper>div {
  display: flex;
  justify-content: center;
}

.zoom-image {
  width: 100%;
  transition: transform 0.5s ease;
  /* Smooth transition */
}

.zoom-image:hover {
  transform: scale(0.9);
  /* Zoom in effect */
}

/* Icon Styling */
.mission-vision-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.contact-section .contact-iconbg {
  min-width: 50px;
  min-height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: var(--alt-bg); */
  background-color: var(--color-3);
  outline: 2px dashed var(--color-3);
  outline-offset: 6px;
}


.flip-icon {
  animation: flipInOut 2s ease-in-out infinite;
}

/* Keyframes for flipping */
@keyframes flipInOut {
  0% {
    transform: rotateY(0deg); /* Starting position */
  }
  50% {
    transform: rotateY(180deg); /* Half flip */
  }
  100% {
    transform: rotateY(360deg); /* Full flip */
  }
}

.float-icon {
  animation: upDown 2.5s ease-in-out infinite;
}

@keyframes upDown {
  0% {
    transform: translateY(0); /* Starting position */
  }
  50% {
    transform: translateY(-20px); /* Move up */
  }
  100% {
    transform: translateY(0); /* Back to start */
  }
}

.iconbg {
  min-width: 60px;
  min-height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: var(--alt-bg); */
  background: var(--primary-gradient)!important;
  color: var(--white-color);
  outline-offset: 6px;
}

/*================================================
 News/News-Details Page CSS
=================================================*/

.blog-social-share a {
  width: 40px;
  height: 40px;
  display: inline-block;
  background-color: rgba(var(--primary-shade), 0.2);
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  color: var(--primary-color);
}

.blog-social-share a:hover {
  width: 40px;
  height: 40px;
  display: inline-block;
  background-color: var(--primary-color);
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: var(--white-text);
  transition: 0.4s ease-in;
}

.comment_avater {
  padding-right: 30px;
}

.comment_text:is(.has-children) {
  border-bottom: 1px solid #f3f3f3;
  padding-bottom: 27px;
}

.avater_text {
  overflow: hidden;
  padding-left: 2px;
  position: relative;
  margin-bottom: 10px;
}

.avater_text h5 {
  font-size: 18px;
  margin-bottom: 4px;
  display: inline-block;
  position: relative;
}

.replay_btn:is(.has_abs) {
  position: absolute;
  right: 0;
  top: 0;
}

.single_post_comment {
  border: 1px solid var(--color-3);
  padding: 40px;
  padding-top: 40px;
}

.heading-bar::before {
  content: "|";
  font-weight: 800;
  color: var(--primary-text);
  font-size: 40px;
  vertical-align: sub;
}

.single_widget:is(.has_border) {
  border-style: solid;
  border-width: 2px;
  border-color: var(--color-3);
}
.widget_title_text:is(.has_border) {
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ededed;
}


.related-images img {
  width: 100%;
  border-radius: 8px;
}
.related-images .col-md-6 {
  margin-bottom: 15px;
}
.tag {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid var(--heading-text);
  border-radius: 50px;
  color: var(--heading-text);
  margin: 5px;
  text-decoration: none;
}
.tag:hover {
  background-color: var(--color-3);
  color: #fff;
  transition: 0.3s ease-in;
}

.card-title:hover{
  color: var(--color-5);
  transition: 0.3s ease-in;
}

.read-more-btn:hover{
  color: var(--color-5)!important;
  transition: 0.3s ease-in;

}

#choose_blog .input-group button {
  top: 0px;
  right: 0px;
  z-index: 9 !important;
  height: 100%;
  border-radius: 0 7px 7px 0 !important; 
}
#choose_blog .input-group input {
  padding: 15px 50px 15px 15px !important;
  border-radius: 5px 0 0 5px !important;
}