@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
    font-family:  "Montserrat", sans-serif;
    margin: 0;padding: 0;
    text-align: center;
}
:root{
    --thm-font:  "Montserrat", sans-serif;
    --thm-base: #1E9B74;
    --thm-base-light: #E3001630;
    --thm-base2: #00A6C0;
    --thm-base2-light: #00A6C010;
    --thm-base3: #696762;
    --thm-base3-light: #69676210;
    --thm-black: #000000;
    --thm-black-ligth: #00000040;
    --thm-gray: #999999;
    --thm-white: #ffffff;
    --thm-section-bg: #f7f7f7;
    --thm-footer: #e2e2e2;  
    --thm-primary: #666666;
}
h1,
h2,
h3,
h4,
h5,
h6,
p{ margin: 0; }
ul{ margin: 0; padding: 0; }
li{ list-style: none; }
h1{ font-size: 35px; font-weight: 500;} 
h2{ font-size: 32px; font-weight: 600;} 
h3{ font-size: 24px;} 
h4{ font-size: 22px; font-weight: 600;} 
h5{ font-size: 20px; font-weight: 500;} 
h6{ font-size: 18px;}
a{ color: var(--thm-black); text-decoration: none; font-weight: 500; transition: 0.5s;}
a:hover {color: var(--thm-base); }
.mb-80{ margin-bottom: 80px;}
.mt-80{ margin-top: 80px;}
.container{ max-width: 1350px;}

.heading-tag{ font-size: 17px; color: var(--thm-base); margin-bottom: 10px; font-weight: 600; text-transform: uppercase;}
.heading{ color: var(--thm-black); margin-bottom: 15px; font-weight: 700;}
.description{ margin-bottom: 15px; font-weight: 500; color: var(--thm-primary);}

.btn-box { background-color: var(--thm-white); padding: 10px 30px; outline: 2.0px solid transparent; outline-offset: 8px; border: 0; border-radius: 30px; color: black; font-size: 16px; text-transform: uppercase; transition: 0.5s;}
.btn-box:hover { outline-offset: 3.0px; background-color: var(--thm-base); color: var(--thm-white); outline: 2.5px solid var(--thm-base);}

.btn-box.style2 { background-color: var(--thm-black); color: white;}

.owl-dots { text-align: center !important;}
.owl-dot { width: 18px; height: 4px; margin: auto; background-color: var(--thm-base-light) !important; margin: 0 3px;  margin-top: 40px !important; border-radius: 10px;}
.owl-dots .active { width: 18px; background-color: var(--thm-base) !important;}

.social-media{ display: inline-flex; gap: 22px; align-items: center; margin-top: 10px; padding: 10px 20px; border: 1px solid #00000020; border-radius: 5px;}
.social-media a{ position: relative; color: var(--thm-white); z-index: 2;}
.social-media i{ font-size: 17px; color:var(--thm-base3); background-color: transparent; transition: 0.5s;}
.social-media a::before{ position: absolute; content: ""; width: 0px; height: 0px; background-color: var(--thm-base); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%; transition: 0.3s;}
.social-media a:hover i{ color: var(--thm-white);}
.social-media a:hover::before{ width: 35px; height: 35px;}

.form-section { width: 100%; margin: auto; padding: 40px; background-color: var(--thm-white); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 8px;}
.form-heading { font-size: 22px; margin-bottom: 0px; color: var(--thm-black); font-weight: 600; }
.form-control { text-align: left; display: block; margin-top: 3px; padding: 10px 15px; font-size: 14px; color: var(--thm-black); background-color: transparent; background-clip: padding-box; border: 1px solid var(--thm-black-ligth); -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 2px; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.form-select { text-align: left; margin-top: 3px; padding: 10px 15px; font-size: 14px; border-radius: 2px; border: 1px solid var(--thm-black-ligth); color: var(--thm-black); background-color: transparent; }
.form-select:focus { border: 1px solid var(--thm-base-light); box-shadow: rgba(250, 18, 18, 0.25) 0px 0px 0px 0.25rem; }
.form-control:focus { color: var(--thm-black); background-color: transparent; border: 1px solid var(--thm-base-light); outline: 0px; box-shadow: rgba(250, 18, 18, 0.25) 0px 0px 0px 0.25rem; }
.form-section button{ border: none; }



.top-header{ position: absolute; top: 20px; right: 10%; z-index: 10; }
.top-header .social-action{  display: flex; gap: 12px; align-items: center;}
.top-header .social-action a i{ background-color: #ffffff20; padding: 8px 10px; border-radius: 50%; transition: 0.7s; font-size: 22px; color: #ffffff;}
.top-header .social-action a:hover i{ background-color: var(--thm-base); color: var(--thm-white);}



.hero-banner-section .banner { position: relative;}
.hero-banner-section .banner .banner-video { width: 100%; height: 99vh; object-fit: cover; overflow: hidden;}
.hero-banner-section .banner .banner-content { width: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);   z-index: 12;}
.hero-banner-section .banner .banner-content h1 { color: var(--thm-white); font-size: 80px; font-weight: 500; line-height: 0.8; text-transform: uppercase;}
.hero-banner-section .banner .banner-content .banner-btn{ display: flex; gap: 15px;}

.hero-banner-section .banner::before{ content: ""; height: 100%; width: 100%; position: absolute; bottom: 5px; background: linear-gradient( rgba(0, 0, 0) 20%, black 100%); opacity: 0.5; z-index: 10;}
 


.top-logo-part h4{
    font-size: 25px;
    color: #ffffff;
    font-weight:600;
    text-transform: uppercase;
    text-shadow: 2px 3px #FFFFFF50;
}
.top-logo-part img{
    max-width: 500px;
    margin: 25px 0px;
}
.top-logo-part .tagline { font-size: 24px; font-weight: 500; text-transform: uppercase; color: var(--thm-white); margin-bottom: 20px;}





.deal-slider-area .content .section-title{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 0px;
}
.deal-slider-area .content .section-title p{
    font-size: 30px;
    font-weight: 500;
    color: #FFFFFF;
}
  .deal-slider-area .content .left-area {
    text-align: center;
    padding: 0px 50px;
  }
  .deal-slider-area .content .right-area {
    align-self: center;
  }
  .deal-slider-area .content .right-area .stars {
    padding-left: 0px;
    margin-bottom: 5px;
  }
  .deal-slider-area .content .right-area .stars li {
    display: inline-block;
    font-size: 14px;
    color: #f9bd22;
  }
  .deal-slider-area .content .right-area .name {
    font-size: 24px;
    line-height: 34px;
    margin-bottom: 9px;
    font-weight: 600;
  }
  .deal-slider-area .content .right-area .description {
    margin-bottom: 16px;
  }
  .deal-slider-area .content .right-area .price {
    margin-top: 25px;
  }
  .deal-slider-area .content .right-area .price p span {
    font-size: 30px;
    line-height: 30px;
    font-weight: 900;
    background-image: linear-gradient(55deg, #0250c5 0%, #d43f8d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0px;
  }
  .deal-slider-area .content .right-area .price del {
    font-size: 18px;
    line-height: 18px;
    font-weight: 600;
    margin-left: 10px;
    color: #555;
  }
  .deal-slider-area .content .right-area .links {
    display: inline-block;
    margin-top: 30px;
  }
  /* .dealofweek .deal-slider-area .content .right-area .links .mybtn1 {
    background: rgba(212, 63, 141, 0.2);
    color: #000;
    transition: all 0.3s linear;
  }
  .dealofweek .deal-slider-area .content .right-area .links .mybtn1:hover {
    color: #fff;
  } */
  .deal-slider-area .content .right-area .deal-counter {
    margin-top: 10px;
  }
  .deal-slider-area .content .right-area .deal-counter span {
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.5);
    padding: 20px 25px 10px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 10px;
    font-weight: 700;
    font-size: 30px;
    line-height: 24px;
    color: #ffffff;
    background-color: #FFFFFF20;
  }
  .deal-slider-area .content .right-area .deal-counter span:last-child {
    margin-right: 0px;
  }
  .deal-slider-area .content .right-area .deal-counter span small {
    display: block;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #ffffff;
  }
  

  .sponsor-logos{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
  }

  .sponsor-logos img{
    max-width: 220px;
  }










@media  only screen and ( max-width: 1440px){
  .top-logo-part h4{ font-size: 25px;}
  .top-logo-part img{ max-width: 400px;}
  .top-logo-part .tagline { font-size: 18px;}
  .hero-banner-section .banner .banner-content h1 { font-size: 60px; }
  .deal-slider-area .content .section-title p{ font-size: 24px; }
  .deal-slider-area .content .right-area .deal-counter span { font-size: 25px; line-height: 24px;}
  .deal-slider-area .content .right-area .deal-counter span small { font-size: 16px; line-height: 20px;}
  .sponsor-logos img{ max-width: 180px;}

}
@media  only screen and ( max-width: 1260px){
  .deal-slider-area .content .section-title{
    grid-template-columns: repeat(4, 1fr);
    padding: 20px 0px;
}
.deal-slider-area .content .section-title > div:nth-child(2){
  grid-column: span 2;
}

}
@media  only screen and ( max-width: 991px){
  .hero-banner-section .banner .banner-content { width: 95%;}
  .top-logo-part h4{ font-size: 25px;}
  .top-logo-part img{ max-width: 400px; margin: 0px 0px 20px;}
  .top-logo-part .tagline { font-size: 18px;}
  .hero-banner-section .banner .banner-content h1 { font-size: 40px; }
  .deal-slider-area .content .section-title p{ font-size: 20px; }
  .deal-slider-area .content .right-area .deal-counter span { font-size: 24px; line-height: 24px;}
  .deal-slider-area .content .right-area .deal-counter span small { font-size: 16px; line-height: 20px;}
  .sponsor-logos img{ max-width: 140px;}
}
@media  only screen and ( max-width: 850px){
  .deal-slider-area .content .section-title{
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    padding: 20px 0px;
}
.deal-slider-area .content .section-title > div:nth-child(2){
  grid-column: span 1;
}
}
@media  only screen and ( max-width: 650px){
  .btn-box {padding: 8px 20px; font-size: 14px;}
  .top-header{top: 10px; right: 5%; z-index: 10; }
  .top-header .social-action{ gap: 8px;}
  .top-header .social-action a i{ padding: 6px 8px;  font-size: 16px;}
  .top-logo-part h4{ font-size: 20px; }
  .top-logo-part img{ max-width: 250px; margin: 20px 0px;}
  .top-logo-part .tagline { font-size: 14px;}
  .hero-banner-section .banner .banner-content h1 { font-size: 35px; line-height: 1.1;}
  .deal-slider-area .content .section-title{ gap: 10px; grid-template-columns: repeat(1, 1fr); padding: 15px 0px 0px;}
  .deal-slider-area .content .section-title p{ font-size: 20px; }
  .deal-slider-area .content .right-area .deal-counter span { padding: 10px 15px 5px; font-size: 26px; line-height: 24px; }
  .deal-slider-area .content .right-area .deal-counter span small { font-size: 14px; line-height: 20px; }
  .sponsor-logos img{ max-width: 120px; }
  .form-section { padding: 20px 15px;}
  .form-heading { display: inline-block; font-size: 16px;}
  .form-control{ margin-top: 0px; padding: 7px 12px; font-size: 13px; border: 1px solid var(--thm-footer);}
  .form-select { margin-top: 0px; padding: 7px 12px; font-size: 13px; border: 1px solid var(--thm-footer);}
  .form-select:focus { border: 1px solid var(--thm-color);}
  .form-control:focus { border: 1px solid var(--thm-color);}
  .form-section .btn-box{ width: 100%; margin-top: 5px;}
}