#banner , #banner .item {position: relative;background: #fff;z-index: 1;overflow: hidden;}
#banner:after{content:'';width: 100%;height: 1px;position: absolute;bottom: 18vh;left: 0;background: #fff;opacity: .4;}
#banner .item:after{content:'';width: 1px;position: absolute;right: 9vw;bottom: 0;height: 18vh;background: #fff;opacity: .5;}
#banner .item:before{content:'';width: 9vw;position: absolute;right: 0;bottom: 0;height: 18vh;background: var(--primary);z-index: 3;}
#banner .item a { position: absolute; width: 100%; height: 100%; background: rgb(31 31 31 / .3); top: 0; left: 0; z-index: 2; }
#banner .info {position: absolute;width: 70vw;bottom: 37vh;left: 20vw;z-index: 3;display: grid;grid-template-columns: 50% 40%;align-items: center;justify-content: space-between;}
#banner .info .h3 {display: block;line-height: 125%;font-size: 26px;font-weight: 300;color: #fff;letter-spacing: 5px;margin-top: 10px;}
#banner .info .bannertitle{display:flex;align-items:center;justify-content: flex-start;gap: 20px;}
#banner .info .bannertitle .title:nth-child(3){width:27%}
#banner .info .bannertitle .line{background:rgb(255 255 255 / 32%);-webkit-transition:all 0.5s;transition:all 0.5s;width: 12%;height:1px}

#banner .info >p {color: #ffffff;font-size: 20px;font-weight: 300;letter-spacing: 4px;font-style: normal;text-align: left;line-height: 210%;}
#banner .info .bannertitle p {font-weight: 400;color: #fff;font-size: 45px;letter-spacing: 3px;font-family: "Cinzel", serif;}
#banner .img { position: relative; width: 100vw; height: 100vh; background: no-repeat 50% / cover; }
#banner .img img , #banner .img video , #banner .img iframe { position: absolute; width: 100vw; height: 100vh; left: 0; top: 0; }
#banner .slick-active .img { -webkit-transform: scale(1); transform: scale(1); animation: banerBg 6s infinite linear; -webkit-animation: banerBg 6s infinite linear; }
#banner .slick-current .info .title,#banner .slick-current .info  .line{animation:slideUpAnimation .8s .2s ease-in-out forwards}
#banner .slick-current .info p{animation:slideUpAnimation .8s .8s ease-in-out forwards}
#banner .slick-current .info .h3{animation:slideUpAnimation .8s ease-in-out forwards}

/* dott */
#banner .dott {position:absolute;bottom: -200px;left: calc(50% - 170px);display: flex;justify-content: center;z-index: 2;width: 340px;aspect-ratio: 1/1;animation: aboutImgAnimation 5s ease-in-out infinite;}
#banner .dott:after{content:'';position: absolute;width: 100%;aspect-ratio: 1/1;top: 0;background: #fff;opacity: .1;border-radius: 50%;}
#banner .dott:before{content:'';position: absolute;width: 100px;aspect-ratio: 1/1;background: #fff;opacity: .2;border-radius: 50%;top: 27%;}
#banner .dott span{position:relative;display: inline-flex;flex-direction: column;align-items: center;top: 65px;}
#banner .dott span:after{content:'';display: block;width: 6px;aspect-ratio: 1/1;border-radius: 50px;background: #fff;}
#banner .dott span:before{content:'';display: block;width: 1px;height: 50px;border-radius: 50px;background: #fff;opacity: .5;margin-bottom: 10px;}
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(-10px);transform:translateY(-10px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}

/* scrolldown */
#scrolldown {position: absolute;padding: 0 0 25px 10px;letter-spacing: .1em;font-weight: 100;font-size: 17px;color: #fff;white-space: nowrap;writing-mode: vertical-rl;bottom: 38%;left: 7vw;animation: godown 1s infinite linear;-webkit-animation: godown 1s infinite linear;font-family: "Cormorant", serif;}

@-webkit-keyframes bannerFadeIn{0%{-webkit-transform:scale(1.2);transform:scale(1.2)}
100%{-webkit-transform:scale(1);transform:scale(1)}
}@keyframes bannerFadeIn{0%{-webkit-transform:scale(1.2);transform:scale(1.2)}
100%{-webkit-transform:scale(1);transform:scale(1)}
}@-webkit-keyframes bannerScrollAnimation{0%{height:0}
50%{height:100%;-webkit-transform:translateY(0);transform:translateY(0)}
100%{-webkit-transform:translateY(100%);transform:translateY(100%)}
}@keyframes bannerScrollAnimation{0%{height:0}
50%{height:100%;-webkit-transform:translateY(0);transform:translateY(0)}
100%{-webkit-transform:translateY(100%);transform:translateY(100%)}
}@-webkit-keyframes slideUpAnimation{0%{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}
100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}

@-webkit-keyframes banerBg { 0% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1.1); } }
@keyframes banerBg { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }

@-webkit-keyframes godown { 0% , 100% { padding: 0 0 25px 10px; } 50% { padding: 10px 0 15px 10px; } }
@keyframes godown { 0% , 100% { padding: 0 0 25px 10px; } 50% { padding: 10px 0 15px 10px; } }

@media screen and (max-width: 1440px){
    #banner .info{grid-template-columns:60% 40%}
}
@media screen and (max-width: 1024px){
    #banner .info{grid-template-columns:1fr;gap: 40px;bottom: 23vh;left: 15vw;}
    #banner .item:before, #scrolldown{display:none;}
}
@media screen and (max-width: 980px){
    #banner .info{left: 10vw;width: 80vw;}
}
@media screen and (max-width: 640px){
    #banner .info .bannertitle .title:nth-child(3){width:100%}
    #banner .info .bannertitle{display:flex;flex-direction: column;align-items: flex-start;gap: 0;}
    #banner:after, #banner .item:after, #banner .info .bannertitle .line{display:none;}
    #banner .dott{width: 200px;left: calc(50% - 100px);bottom: -120px;}
    #banner .img{height: 80vh;}
    #banner .info{width:90%;left: 5%;bottom: 10%;}
    #banner .info >p{font-size: 17px;display: none;}
    #banner .info .h3{font-size: 19px;}
}