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

        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 Section Styles
        07.   Today's Weather Forecast Section Styles
        08.   Weekly Weather History Section Styles
        09.   Recent Search Weather Section Styles
        10.   Top Weather Forecast Section Styles
        11.   Weather Highlights Section Styles
        12.   Contact Section Styles
        13.   Subscribe Section Styles
        14.   City Slider Section Styles
        15.   Footer Section Styles
        16.   Back to top Styles
     
    
  
----------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');


/* ==================
   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;
  --secondary-color: #2E2070;
  --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;
  --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;
  --secondary-color: #2E2070;
  --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;
  
  --secondary-text: #AD2F87;
  --para-text: #E4E4E4;
  --white-text: #ffffff;
  --form-text: #C8C8C8;
  --danger-text: #fa5050;

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


* {
  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-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);
}

/* Button Style */

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

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

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

/* ==================
  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(../../assets/backround_img/hero_bg.webp) no-repeat;
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{
  opacity: 1;
  bottom: 0;
}
.weekly-weather .weather-card:hover 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: 15px 150px 15px 15px !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(../../assets/backround_img/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%;
}