landing1.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat', sans-serif;
    /* font-weight: 600; */
    color:  #000;
    background-color: #E5E5E5;
    overflow-x: hidden;
}
.banner-video {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.7)), url('images/IMG_0610.jpg');
    background-size: cover;
}


@media screen and (max-width:450px) {
    .banner-video {
        background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.7)),url('images/IMG_0610\ -\ Copy.jpg');
        background-size: cover;
    }
}
.YTVid{
    width: 80%;
    height: 80%;
}

@media screen and (max-width:1100px) {
    .YTVid{
        height:60%;
    }    
}

@media screen and (max-width:900px) {
    .YTVid{
        height:40%;
    }    
}

a{
    text-decoration: none;
}

.content-part-2{
    display: flex;
    flex-direction: column !important;
    justify-content: center;
    font-size: 7rem;
    font-weight: 400;
    line-height: 7rem;
    align-content: center;
    flex-direction: row;
    align-items: center;
}

.enterButton {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    font-size: 2.5rem;
    margin-top: 0.75rem;
    background-color: #e5e5e5;
    border: 4px solid black;
    width: 100%;
    padding: 0.5rem;
    border-radius: 10px;
    width:20rem;
    transition: all 0.5sec;
}

@media screen and (max-width:400px) {
    #home .btn{
        width: 80vw;
    }
}

.landingHeading{
    font-family: 'Cormorant Garamond', serif;
    color: #93845B;
    font-size: 4.5rem;
    font-weight: 400;
    line-height: 3.5rem;
    padding: 2rem 0.6rem;
    text-align: center;
}
@media screen and (max-width: 600px) {
    .landingHeading{
        font-size: 3.3rem;
    }
}
@media screen and (max-width: 400px) {
    .landingHeading{
        font-size: 2.6rem;
        padding: 1rem 0.6rem;
    }
}

.navbar{
    width: 100vw !important;
}
.nav-link{
    color: #fff;
}

/* navbar */
@media screen and (max-width:992px) {
    .navbar-nav{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #E5E5E5;
        margin-top: 1.8rem;
    }
    .nav-item{
        margin-top: 0.5rem;
    }
}
.navbar-solid{
    background-color: #E5E5E5;
    color: #000;
}

.nav-link:hover{
    padding-bottom: 0;
    color: #665832 !important;
}
.nav-link::after{
    content: '';
    height: 2px;
    width: 0%;
    background-color: #665832;
    display: block;
    transition: 0.3s ease-in-out;
}
.nav-link:hover::after{
    content: '';
    height: 2px;
    width: 80%;
    background-color: #665832;
    display: block;
}
.navbar-brand img{
    height: 3rem;
    padding-top: 0 !important;
    margin: 0 !important;
}
.navbar{
    justify-content: flex-start !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.text-dark{
    font-weight: 600;
}

/* banner section */
#home .banner-image {
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)), url('images/IMG_0610.jpg');
    background-size: cover;
    background-attachment: fixed;
}

@media screen and (max-width:450px) {
    #home .banner-image {
        background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.7)),url('images/IMG_0610\ -\ Copy.jpg');
        background-size: cover;
    }
}
.content-part{
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.75rem;
    font-weight: 400;
    color: #fff;
}
.content-2{
    color: #323232;
    font-size:1.5rem;
    text-align: left;
}
.mi{
    width: 45%;
    margin-left: 10rem;
    border: 3px solid black;
    border-radius: 10px;
}
@media screen and (max-width: 1200px) {
    .mi{
        width: 60%;
        margin: 0;
    }
}
@media screen and (max-width: 990px) {
    .mi{
        width: 100%;
    }
}
@media screen and (max-width: 700px) {
    .content-part{
        font-size: 1.5rem;
    }
    .content-2{
        text-align: center;
    }
    .mi{
        width: 100%;
        margin:0;
    }
}
@media screen and (max-width: 570px) {
    .content-part{
        /* font-size: 1rem; */
    }
}
/* .content-2 span{
    /* text-decoration: underline; */
    /* font-family: 'Cormorant Garamond', serif; */
    margin-top: 5rem;
    font-weight: 700;
} */

/* meet section */
#meetSection{
    padding-top: 4rem;
    position: relative;
    background-color: #111;
    padding-bottom: 2rem;
}
#meetSection .landingHeading{
    padding-bottom: 5rem;
}
@media screen and (max-width:500px) {
    #meetSection .row{
        flex-direction: column;
    }
    
}
#drag-container{
    padding-bottom: 7rem;
}

/* about section */
#aboutSection{
    padding-top: 4rem;
    padding-bottom: 2rem;
}
.content{
    /* padding-left: 5vw; */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content:center;
}

.button{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.button button{
    background-color: #f3f0e9;
    border: 4px solid black;
    width: 100%;
    padding: 0.5rem;
    margin-top: 1.2rem;
    border-radius: 10px;
    width:20rem;
}

/* divinef section */
#divineFSection{
    background-color: #000;
    color: #F3F0E9;
    padding: 4rem 5rem;
    /* width: 80%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.divCard{
    border: 5px solid #f3f0e9;
}
.divContent button{
    width: 100%;
    background-color: #000;
    color: #f3f0e9;
    padding: 0.5rem 0;
    font-size: 1.4rem;
    transition: 0.08s ease-in;

}
@media screen and (max-width:500px) {
    .divContent button{
        font-size: 1rem;
    }    
}
.divImage{
    border-bottom: 5px solid #f3f0e9;
}

.supportContent{
    padding-bottom: 5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    letter-spacing: 1px;
}

/* join section */
#joinSection{
    padding-top: 4rem;
    background-color: #000;
    color: #F3F0E9;
}
.landingHeading1{
    font-family: 'Cormorant Garamond', serif;
    color: #93845B;
    font-size: 4.5rem;
    font-weight: 400;
    line-height: 3.5rem;
    padding: 2rem 0rem;
}
@media screen and (max-width: 600px) {
    .landingHeading1{
        font-size: 3.3rem;
    }
}
@media screen and (max-width: 400px) {
    .landingHeading1{
        font-size: 2.6rem;
        padding: 1rem 0.0rem;
    }
}
#joinSection img{
    height: 28rem;
    border: 6px solid #f3f0e9;
    border-radius: 10px;
    margin: auto;
}
#joinSection button{
    background-color: #f3f0e9;
    border: 4px solid black;
    width: 100%;
    padding: 0.5rem;
    margin-top: 1.2rem;
    border-radius: 10px;
}
.row__{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding-bottom: 3rem;
}
.col-md-6__{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0 0rem 0 3rem;
    width: 50%;
    padding: 0.5rem 2rem;
}
.wlImages{
    display: flex;
    flex-direction: row;
    justify-content: center;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
}
.cnt{
    padding: 0 !important;
    margin: 0 !important;
    width:80%;
    text-align: center;
    overflow: hidden;
}
@media screen and (max-width:600px) {
    .row__{
        flex-direction: column;
    }   
    .col-md-6__{
        padding: 0.5rem 2rem;
        width: 100%;
    } 
    .landingHeading1{
        text-align: center;
    }
    #joinSection img{
        height: auto;
    }
}
@media screen and (max-width:800px) {
    .col-md-6__{
        margin: 0;
    }
}
@media screen and (min-width:700px) {
    #joinSection img{
        transform: rotate(10deg);
    }
}

@media screen and (max-width:850px) {
    #joinSection img{
        height: 22rem;
    }
}
.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
  }

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 215px;
  }

.swiper-slide img {
    display: block;
    width: 100%;
  }
.slider-card{
    display: flex;
    /* padding: 1rem 1rem; */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* .slider-image{
    width: 200px;
} */
.slider-content{
    padding: auto;
}
.swiper-slide img{
    transform: rotate(0) !important;
    height: auto !important;
    box-shadow: 0 !important;
    border: 4px solid black !important;
    margin-top: 0 !important;
}
.magnetic{
    color:  #000;
    background-color: #E5E5E5;
    margin-top: 3rem;
    margin-bottom: 2rem;
}
.magnetic img{
    border-color: #000 !important;
    margin-top: 1.3rem;
}



/* testimonials Section */
#testimonialsSection{
    background-color: #000;
    padding-top: 1.7rem;
}
.t_cards{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1rem 5rem;
}
.t_card{
    background-color: #F3F0E9;
    margin: 0.4rem 2rem;
    position: relative;
}
.t_image{
    border: 6px solid #F3F0E9;
    display: block;
    height: 100%;
    width: 100%;
}
.tcard_desc{
    text-align: center;
    text-transform: uppercase;
    padding: 0.5rem 0;
    height: 3.4rem;
}
@media screen and (max-width:950px) and (min-width:620px){
    .t_cards{
        padding: 1rem 3rem;
    }
    .tcard_desc{
        font-size: 0.7rem;
        height: 3rem;
    }
    .t_card{
        margin: 0.4rem 1rem;
    }
}

@media screen and (max-width:620px) {
    .t_cards{
        flex-direction: column;
        align-items: center;
        padding: 0.7rem 2rem;
    }
    .tcard_desc{
        height: auto;
    }
    .t_card{
        max-width: 20rem;
    }
}
.project_overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0,0, 0.6);
    color: #fff;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
}
.project_overlay > *{
    transform: translateY(20px);
    transition: transform 0.25s;
}
.project_overlay--blur{
    backdrop-filter: blur(10px);
}

.project_overlay:hover{
    opacity: 0.87;
}
.project_overlay:hover > *{
    transform: translateY(0px);
}
.project_description{
   padding: 0.8rem; 
}
@media screen and (max-width:950px) and (min-width:620px) {
    .project_description{
        font-size: 0.6rem;
    }  
}
@media screen and (min-width:950px) {
    .project_description{
        font-size: 1.1rem;
    }  
}
@media screen and (max-width:400px) {
    .project_description{
        font-size: 0.4rem;
    }  
}
/* footer section */
#footerSection{
    /* margin: 5rem 0rem 0; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #000;
}
.footerContent{
    background-color: #111111;
    color: #93845B;
    text-align: center;
    padding: 2rem 3rem;
    font-size: 25px;
    line-height: 2rem;
    width: 100%;
}
#supportSection .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* carousel */
 
   #drag-container, #spin-container {  
    position: relative;  
    display: -webkit-box;  
    display: -ms-flexbox;  
    display: flex;  
    margin: auto;  
    -webkit-transform-style: preserve-3d;  
        transform-style: preserve-3d;  
    -webkit-transform: rotateX(-10deg);  
        transform: rotateX(-10deg);  
   }  
   #drag-container img, #drag-container video {  
    -webkit-transform-style: preserve-3d;  
        transform-style: preserve-3d;  
    position: absolute;  
    left: 0;  
    top: 0;  
    width: 75%;  
    height: 100%;  
    line-height: 200px;  
    font-size: 50px;  
    text-align: center;  
    -webkit-box-shadow: 0 0 8px #fff;  
        box-shadow: 0 0 8px #fff;  
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);  
   }  
   #drag-container img:hover, #drag-container video:hover {  
    -webkit-box-shadow: 0 0 15px #fffd;  
        box-shadow: 0 0 15px #fffd;  
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);  
   }  
   #drag-container p {  
    font-family: Serif;  
    position: absolute;  
    top: 100%;  
    left: 50%;  
    -webkit-transform: translate(-50%,-50%) rotateX(90deg);  
        transform: translate(-50%,-50%) rotateX(90deg);  
    color: #fff;  
   }  
   #ground {  
    width: 100%;  
    height: 900px;  
    position: absolute;  
    top: 100%;  
    left: 50%;  
    -webkit-transform: translate(-50%,-50%) rotateX(90deg);  
        transform: translate(-50%,-50%) rotateX(90deg);  
    background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);  
   }  
   #music-container {  
    /* position: absolute;   */
    top: 0;  
    left: 0;  
   }  
   @-webkit-keyframes spin {  
    from{  
     -webkit-transform: rotateY(0deg);  
         transform: rotateY(0deg);  
    } to{  
     -webkit-transform: rotateY(360deg);  
         transform: rotateY(360deg);  
    }  
   }  
   @keyframes spin {  
    from{  
     -webkit-transform: rotateY(0deg);  
         transform: rotateY(0deg);  
    } to{  
     -webkit-transform: rotateY(360deg);  
         transform: rotateY(360deg);  
    }  
   }  
   @-webkit-keyframes spinRevert {  
    from{  
     -webkit-transform: rotateY(360deg);  
         transform: rotateY(360deg);  
    } to{  
     -webkit-transform: rotateY(0deg);  
         transform: rotateY(0deg);  
    }  
   }  
   @keyframes spinRevert {  
    from{  
     -webkit-transform: rotateY(360deg);  
         transform: rotateY(360deg);  
    } to{  
     -webkit-transform: rotateY(0deg);  
         transform: rotateY(0deg);  
    }  
   }

   .btn {
    position: relative;
    display:block;
    height: 3.5rem;
    width: 20rem;
    background-color: #E5E5E5;
    font-size: 1.5rem;
    padding: 0.5rem;
    margin-top: 0.75rem;
    border-radius: 10px;
    letter-spacing: 2px;
    border: 1px solid black;
    text-transform: uppercase;
    outline: 0;
    overflow:hidden;
    z-index: 1;
    cursor: pointer;
    transition:         0.08s ease-in;
    -o-transition:      0.08s ease-in;
    -ms-transition:     0.08s ease-in;
    -moz-transition:    0.08s ease-in;
    -webkit-transition: 0.08s ease-in;
  }
  
  .fill:hover {
    color: whitesmoke;
  }
  
  .fill:before {
    content: "";
    position: absolute;
    background: #383736;
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
    z-index: -1;
    -webkit-transition: top 0.09s ease-in;
  }
  
  .fill:hover:before {
    top: 0;
  }
  .fill-1:hover {
    color: #000;
  }
  
  .fill-1:before {
    content: "";
    position: absolute;
    background: #e5e5e5;
    color: #000;
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
    z-index: -1;
    -webkit-transition: top 0.09s ease-in;
  }
  
  .fill-1:hover:before {
    top: 0;
  }
  .fill-1{
      margin-top: 0 !important;
  }
  .button button{
    background-color: #f3f0e9;
    border: 4px solid black;
    width: 100%;
    padding: 0.5rem;
    margin-top: 1.2rem;
    border-radius: 10px;
    width:20rem;
    font-size: 0.8rem;
    font-weight: 600;
}