@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

@import url('../font/LED-Dot-Matrix.css');



:root{

    --shades01:#fff;

    --shades02:#3C3C3C;

    --buttonColor:#127EF5;

    --checkmark01:#8DC640;

    --checkmark02:#E24C4B;

  }





  /* ********|| INITIALIZATION STARTS ||******** */

body, html { width: 100%; line-height:1; margin:0 auto !important;padding:0 !important;font-family: 'Poppins', sans-serif; font-weight: 400; -webkit-font-smoothing: subpixel-antialiased;text-shadow: 1px 1px 1px rgba(var(--shades02-rgb),0.004);font-size: 16px;  color: var(--shades02); background:var(--shades01);position: relative; z-index: 0;}



*:focus{outline: none !important;outline-offset: none !important;outline-offset: 0 !important;}

a {text-decoration: none ;}

a:hover{text-decoration: none;-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease;transition: all 0.3s ease;}

a:focus{ outline: none;text-decoration: none;}

button{-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease;transition: all 0.3s ease;}

input:focus, label:focus{outline: none !important;outline-offset: none !important;outline-offset: 0 !important;}

/* ********|| INITIALIZATION ENDS ||******** */



/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0}

/* Firefox */

input[type=number] {-moz-appearance: textfield;}

/* ********|| ADJUSTMENT CLASSES STARTS ||******** */

*,::after,::before{box-sizing: border-box!important;}

p { margin: 0; }



/* ********|| ADJUSTMENT CLASSES ENDS ||******** */

.section-hero-banner{width: 100%; height: 100vh; position: relative; z-index: 0; display: flex; align-items: end; padding-bottom: 80px;}
.banner-image{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;    display: flex;}
.banner-image img{width: 100%;height: 100%;object-fit: cover;}
.banner-image::after{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%; background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,1));z-index: 2;}
.section-hero-banner .container{max-width: 1280px; margin: 0 auto; width: 100%; display: flex; flex-direction: column;}
.section-hero-banner .banner-wrapper{position: absolute; bottom: 130px; max-width: 650px; width: 100%; z-index: 3; padding-bottom: 210px;}
.section-hero-banner .banner-content .banner-title{font-size: 100px; font-family: 'LED Dot-Matrix';color: var(--shades01);margin: 0;font-weight: 400;margin-left: -5px;}
.section-hero-banner .banner-content .banner-description h2{font-size: 24px;font-weight: 400; color: var(--shades01);letter-spacing: 0.025em;margin: 35px 0;}
.section-hero-banner .banner-content .subscription{position: relative;}
.section-hero-banner .banner-content .subscription .add-email{position: relative; width: 100%; height: 80px; border-radius: 50px;outline: none; box-shadow: none; border: none;padding-left: 40px;padding-right: 130px; font-size: 20px;color: var(--shades02);}
.section-hero-banner .banner-content .subscription .btn_action{height: 54px; background: var(--buttonColor); display: flex; align-items: center; justify-self: center; border-radius: 50px; border: transparent; padding: 0 30px; color: var(--shades01); font-size: 20px; font-weight: 700; box-shadow: none; position: absolute; right: 20px; top: 14px;z-index: 4;cursor: pointer;}
.subscribe-toaster, .error-toaster{width: 100%;position: absolute;left: 0;right: 0;margin: 0 auto; display: flex;align-items: center;gap: 20px;padding: 20px 25px;border: 2px solid var(--shades01);border-radius: 20px;overflow: hidden; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);  background-color: rgba(255, 255, 255, 0.2);  }
.subscribe-toaster .checkmark{width: 65px;aspect-ratio: 1 / 1;background: var(--checkmark01);border-radius: 20px;overflow: hidden;display: flex;align-items: center;justify-content: center;font-size: 30px;color: var(--shades01);box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);}
.subscribe-toaster, .error-toaster{margin-top: 40px;}
.subscribe-toaster .subsscribe-title, .error-toaster .error-title{font-size: 24px;color: var(--shades01);font-weight: 700;margin-bottom: 10px;}
.subscribe-toaster .subscribe-description, .error-toaster .error-description{font-size: 14px;color: var(--shades01);}
.close-subscribe{position: absolute;width: 25px;aspect-ratio: 1 / 1;border-radius: 50%;background: var(--shades01);display: flex;align-items: center;justify-content: center;color: var(--buttonColor);border: transparent;font-size: 18px;right: 15px;top: 15px;}
.error-toaster .checkmark{width: 65px;aspect-ratio: 1 / 1;background: var(--checkmark02);border-radius: 20px;overflow: hidden;display: flex;align-items: center;justify-content: center;font-size: 30px;color: var(--shades01);box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);}
.close-error{position: absolute;width: 25px;aspect-ratio: 1 / 1;border-radius: 50%;background: var(--shades01);display: flex;align-items: center;justify-content: center;color: var(--checkmark02);border: transparent;font-size: 18px;right: 15px;top: 15px;}
.social-links{display: flex; align-items: center; gap: 30px; position: absolute; z-index: 2; bottom: 0; left: 0;}
.social-links a{color: var(--shades01);font-size: 30px;}

@media screen and (max-width: 1600px){
    .section-hero-banner .banner-wrapper{bottom: 50px;}
    .section-hero-banner .banner-content .banner-title{font-size: 84px;}
    .section-hero-banner .banner-content .subscription .add-email{height: 65px;}
    .section-hero-banner .banner-content .subscription .btn_action{height: 45px; top: 10px;}
}

@media screen and (max-width: 1440px){
    .section-hero-banner .banner-wrapper{bottom: 70px;}
    .section-hero-banner .container{max-width: 960px;}
    .section-hero-banner .banner-content .banner-title{font-size: 75px;}
    .section-hero-banner .banner-content .subscription .add-email{height: 60px;}
    .section-hero-banner .banner-content .subscription .btn_action{height: 40px;top: 10px;}
    .section-hero-banner .banner-content .banner-description h2, .subscribe-toaster .subsscribe-title, .error-toaster .error-title{font-size: 21px;}
}
@media screen and (max-width: 1366px){
  .section-hero-banner .banner-content .subscription .add-email { height: 56px; }
  .section-hero-banner .banner-content .subscription .btn_action{height: 36px;}
}
@media screen and (max-width: 1280px){
    .section-hero-banner .banner-content .banner-title{font-size: 65px;}
}
@media screen and (max-width: 1024px){
    .section-hero-banner .container {max-width: 780px;}
}

@media screen and (max-width: 990px){
    .section-hero-banner .banner-wrapper { padding-bottom: 150px; }
    .section-hero-banner .container{max-width: 650px;}
    .section-hero-banner .banner-content .banner-title{font-size: 51px;}
    .section-hero-banner .banner-content .banner-description h2{font-size: 18px;margin: 20px 0;}
    .section-hero-banner .banner-content .subscription .add-email{height: 60px;}
    .section-hero-banner .banner-content .subscription .btn_action{height: 40px;top: 12px;}
    .subscribe-toaster .subsscribe-title, .error-toaster .error-title{font-size: 18px;margin-bottom: 2px;}
    .subscribe-toaster .subscribe-description, .error-toaster .error-description{font-size: 12px;}
    .subscribe-toaster, .error-toaster{gap: 15px; padding: 12px 24px;margin-top: 30px;}
    .subscribe-toaster .checkmark, .error-toaster .checkmark{width: 35px;font-size: 18px;border-radius: 12px;}
}

@media screen and (max-width: 990px) and (orientation: landscape){}

@media screen and (max-width: 768px){
    .banner-image img{object-position: right;}
    .section-hero-banner .banner-content .banner-title{font-size: 58px;text-align: center;}
    .section-hero-banner .banner-content .banner-description h2{font-size: 14px;text-align: center;}
    .section-hero-banner .banner-content .subscription .add-email{height: 50px;font-size: 12px;padding-right: 80px;}
    .section-hero-banner .banner-content .subscription .btn_action{height: 38px; font-size: 12px; padding: 0 20px; top: 6px; right: 12px;}
    .subscribe-toaster .checkmark, .error-toaster .checkmark{width: 45px;font-size: 26px;}
    .subscribe-toaster, .error-toaster{border-radius: 12px;}
    .subscribe-toaster .subsscribe-title, .error-toaster .error-title{margin-bottom: 7px;}
    .subscribe-toaster .subscribe-description, .error-toaster .error-description { font-size: 13px; }
    .close-error {width: 20px;font-size: 12px; right: 8px;top: 7px;}
    .social-links{width: 100%;justify-content: center;}
}

@media screen and (max-width: 640px){}

@media screen and (max-width: 480px){
    .subscribe-toaster, .error-toaster{width: 90%;}
    .section-hero-banner .banner-wrapper { padding-bottom: 265px; }
    .section-hero-banner .banner-content { max-width: 100%; margin: 0 auto; padding:0 16px;}
    .section-hero-banner .banner-content .banner-title {font-size: 56px;}
    .subscribe-toaster, .error-toaster{padding: 12px;}
    .section-hero-banner .banner-content .subscription .add-email{padding-right: 80px; padding-left: 20px;}
    .close-subscribe{width: 20px;font-size: 14px;right: 10px;top: 5px;}
    .social-links{justify-content: center;    margin-bottom: 20px;}
}

@media screen and (max-width: 375px){
    .section-hero-banner .banner-wrapper { padding-bottom: 180px; }
    .section-hero-banner .banner-content { max-width: 100%; margin: 0 auto;padding:0 16px;}
    .section-hero-banner .banner-content .banner-title {font-size: 48px;}
    .subscribe-toaster .subsscribe-title, .error-toaster .error-title {font-size: 16px;}
    .subscribe-toaster .subscribe-description, .error-toaster .error-description{font-size: 11px;}
    .social-links{margin-bottom:0;}

}