styles.css

/*CUSTOM SCROLL BAR*/
*,html{
    scroll-behavior: smooth;
    }
    *, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    :root{
    scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
    scrollbar-width: thin !important;
    --white:#fff;
    --black:#1e1e1e;
    --pink:#e30846;
    --secondary:#202124;
    --gray:#b8bca7;
    --blue:#061221;
    }
    ::-webkit-scrollbar {
    height: 12px;
    width: 8px;
    background: #000;
    }
    ::-webkit-scrollbar-thumb {
    background: gray;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
    }
    ::-webkit-scrollbar-corner {
    background: #000;
    }
    
    /*DEFAULT*/
    body{
    margin:0;
    overflow-x:hidden !important;
    font-family: 'Source Sans Pro', sans-serif;
    }
    
    a{
    text-decoration:none;
    color:var(--white);
    }
    
    a,button{
    transition:0.5s;
    }
    
    p{
    line-height:1.8em;
    letter-spacing:0.06em;
    }
    
    fieldset{
    border:0;
    }
    
    a, button, input, textarea, select{
    outline:none !important;
    }
    
    img{
    width:99%;
    }
    
    .title{
    font-family: 'Playfair Display', serif;
    }
    
    .cursive{
    font-family: 'Dancing Script', cursive;
    }
    
    em{
    font-style:normal;
    color:var(--pink);
    }
    
    p{
    line-height:1.6em;
    letter-spacing:0.06em;
    }
    
    .title{
    font-family: 'Playfair Display', serif;
    }
    
    .title_header{
    width:60%;
    text-align:center;
    margin:auto;
    }
    
    .title_header h1{
    font-size:2em;
    }
    
    .title_header h3{
    font-size:1.2em;
    font-weight:400;
    color:rgba(1,1,1,0.7);
    }
    
    .btn1{
    padding:20px;
    text-align:center;
    display:inline-block;
    width:200px;
    background-color:#EF5137;
    border-radius:40px;
    font-weight:600;
    }
    
    .btn1:hover{
    background-color:#cd2027;
    }
    
    .btn2{
    padding:20px;
    text-align:center;
    display:inline-block;
    width:250px;
    border-radius:40px;
    font-weight:600;
    }
    
    .btn2:hover{
    background-color:var(--secondary);
    }
    
    .border-shape {
    background: var(--secondary) none repeat scroll 0 0;
    color: #fff;
    display: block;
    height: 3px;
    left: 0;
    margin: 20px auto;
    position: relative;
    right: 0;
    text-align: center;
    top: 0;
    width: 80px;
    }
    
    .border-shape::before {
    background: var(--pink) none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 1px;
    left: 80px;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 1px;
    width: 100%;
    }
    
    .border-shape::after {
    background: var(--pink) none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 1px;
    margin: 0 auto;
    position: absolute;
    right: 80px;
    text-align: center;
    top: 1px;
    width: 100%;
    }
    
    @media (max-width:820px){
    .btn1,.btn2{
    padding:10px 15px;
    width:150px;
    }
    .title_header{
    width:100%;
    }
    .title_header h1{
    font-size:1.5em;
    }
    
    .title_header h3{
    font-size:1em;
    }
    }

    /*ANIMATION*/
    @keyframes arrows {
    0%,
    100% {
    color: black;
    transform: translateY(0);
    }
    50% {
    color: #3AB493;
    transform: translateY(20px);
    }
    }
    
    .animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
    }
    
    @-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
    }
    
    @keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
    }
    
    /*HEADER*/
    .header{
        width:100%;
        position:relative;
        display:flex;
        align-items:center;
        background-image: linear-gradient(to right, #F69055 ,  #F59D50, #F48355,#F37756,#EF5137,#f6482d,#fa4225);
        padding:1rem 0;
        padding-bottom:3rem;
        }
    
    .header section{
    width:100%;
    text-align:center;
    padding:1rem 2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    }
    
    .header section span{
    margin:0 20px;
    color: #cd2027;
    }

    .header section span a{
    color:var(--white);
    white-space:nowrap;
    }
    
    .header section span a:hover{
    color: #cd2027;
    }
    
    @media (max-width:820px){
    .header section:nth-child(1){
    display:none;
    }
    }
    
    /*TOP NAVIGATION*/
    #header{
    position:fixed;
    top:5rem;
    width:100%;
    z-index:99999;
    transition:0.5s;
    }
    
    
    .topnav {
        overflow: hidden;
        background-color: #000;
        width:80%;
        margin:auto; 
        box-shadow:0px 6px 16px -6px #EF5137;
        transition:0.5s;
        }
   
    .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 16px 16px;
    margin:auto 1rem;
    text-decoration: none;
    font-size: 17px;
    position:relative;
    top:10px;
    }
    
    #logo{
    width:100px;
    position:relative;
    top:-10px;
    }
    
    #icon{
    float:right;
    }
    
    #active{
    display:flex;
    }
    
    #active img{
    width:130px;
    }
    
    #active:hover{
    color:#fff;
    }
    
    .topnav .icon {
    display: none;
    }
    
    .dropdown {
    float: left;
    overflow: hidden;
    }
    
    .dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 16px 16px;
    background-color: inherit;
    font-family: inherit;
    margin:auto 1rem;
    position:relative;
    top:10px;
    }
    
    .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-top:2px solid #cd2027;
    }
    
    .dropdown-content a {
    float: none;
    color: black;
    padding: 8px 16px;
    margin:auto 0rem;
    text-decoration: none;
    display: block;
    text-align: left;
    top:0;
    }
    
    .topnav a:hover, .dropdown:hover .dropbtn {
    color: #cd2027;
    }
    
    .dropdown-content a:hover {
    background-color: #ddd;
    color: black;
    }
    
    .dropdown:hover .dropdown-content {
    display: block;
    }
    
    @media screen and (max-width: 1120px) {
    .logo{
    width:20px;
    position:static;
    }
    .dropdown .dropbtn {
    padding: 14px 16px;
    }
    .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
    }
    .topnav a.icon {
    float: right;
    display: block;
    }
    #active{
    display:none;
    }
    }
    
    @media screen and (max-width: 1120px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    }
    .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    padding: 14px 16px;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
    }
    }
   
    /*BANNER*/
    .banner{
    background-color: #000;
    background-size:cover;
    background-position:center; 
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--white);
    position:relative;
    }

    .bgpic{
    width: 60%;
    max-width: 1000px;
    height: auto;
    padding: 8%;
    z-index: 1;
    }
    
    .banner:after{
    content:"";
    background-image:url("https://i.ibb.co/8zB1N3z/wave.png");
    background-size:cover;
    width:100%;
    height:25%;
    position:absolute;
    bottom:0;
    }
    @media screen and (max-width:730px) {
      .bgpic{
        padding-top: 15%;
        padding-bottom: 4%;
      }
    }
    @media screen and (max-width:700px) {
      .banner:after{
        height:15%;
      }
    }
    
    .banner section{
    width:55%;
    text-align:center;
    }
    
    .banner section .cursive{
    font-size:5em;
    line-height:0;
    }
    
    .banner section h2{
    font-weight:200;
    line-height:1.6em;
    }
    
    .banner .btn1{
    display:inline-block;
    margin:2vh 20px;
    }
    
    @media (max-width:820px){
    .banner section{
    width:95%;
    }
    .banner section h2{
    font-size:1.3em;
    }
    .banner section .cursive{
    font-size:2.3em;
    }
    .banner .btn1{
    margin:2vh 10px;
    }
    }
    
    /*SECTION1*/
    .section1{
    display:flex;
    align-items:center;
    }
    
    .section1 section{
    padding:2rem;
    width:100%;
    font-size:18px;
    color:rgba(1,1,1,0.7);
    position:relative;
    }
    
    .section1 section em{
    position:relative;
    }
    
    .section1 section em:before{
    content:"";
    position:absolute;
    left:-3%;
    top:-10%;
    width:20px;
    height:20px;
    border-radius:50%;
    background-image: linear-gradient(#cebfb6,#ddd);
    z-index:-1;
    }
    
    .section1 section .title{
    font-size:2.5em;
    line-height:0;
    color:var(--black);
    }
    
    .section1 section ol li{
    padding:15px 0;
    list-style:none;
    }
    
    .section1 section ol li:before{
    content:"\f00c";
    font-family:"FontAwesome";
    background-color:#cebfb6;
    border-radius:50%;
    padding:8px;
    margin:0 10px;
    color:var(--secondary);
    }
    
    .section1 .dots{
    width:auto;
    position:absolute;
    right:10%;
    pointer-events:none;
    --delay: 0s;
    animation: arrows 4s var(--delay) infinite ease-in;
    }
    
    /*ABOUT MR*/
    .about_mr{
    display:flex;
    align-items:center;
    background-repeat:no-repeat;
    background-position:right;
    margin:2rem 0;
    padding: 0 2%;
    }
    
    .about_mr section{
    position:relative;
    width:100%;
    padding:4rem;
    }
    
    .about_mr section:nth-child(2){
    padding:4rem 2rem;
    }
    
    
    .about_mr section img:nth-child(1){
    width:70%;
    border:5px solid var(--white);
    border-radius:5px;
    }
    
    .about_mr section img:nth-child(2){
    position:absolute;
    right:15%;
    bottom:5%;
    width:40%;
    border:5px solid var(--white);
    }
    
    .about_mr .title{
    font-size:3em;
    line-height:0em;
    }
    
    .about_mr h3{
    font-weight:400;
    }
    
    .about_mr p{
    font-size:20px;
    color:rgba(1,1,1,0.7);
    }
    
    .about_mr .btn1{
    display:block;
    }

    .cubes-img{
      width:90vh;
      height:80vh;
      margin-bottom:-150px;
    }
    
    @media (max-width:820px){
    .about_mr{
    display:block;
    }
    
    .about_mr section{
    padding:1rem;
    }
    
    .about_mr section:nth-child(2){
    padding:4rem 1rem;
    }
    
    .about_mr .title{
    font-size:1.8em;
    }
    
    .about_mr p{
    font-size:18px;
    }
    }

    
    
    .Club-desc{
      opacity:1;
      animation: fadein 3s ease-in-out; 
      animation-delay:2s; 
    }

  @keyframes fadein{
    0%{
      opacity:0; 
    }
    100%{
      opacity:1; 
    }
  }

  .NJACK-highlight{
    font-weight: bolder;
    font-size: 1.2em;
    color:red
    
  }
  
    /*SECTION2*/
    .section2{
    padding:3rem;
    background-color:#f4f8f7;
    }
    
    .section2 .cards section{
    display:flex;
    align-items:center;
    }
    
    .section2 .cards section .card{
    margin:10px;
    background-color:var(--white);
    border-radius:30px;
    width:100%;
    padding:2rem;
    box-shadow: 0 0 20px 0 #dddddd8c;
    position:relative;
    transform:scale(1);
    transition: 150ms ease-in-out;

    }
    
    .section2 .cards section .card h3{
    font-weight:600;
    color:rgba(1,1,1,0.8);
    }
    
    .section2 .cards section .card p{
    color:rgba(1,1,1,0.7);
    }

    
    .section2 .cards section .card .mark{
    padding:5px;
    background-color:#cebfb6;
    border-radius:50%;
    float:right;
    }
    .section2 .cards section .card:hover{
      transform:scale(1.1);
      z-index:1; 
      background-color: rgb(243,107,57);
    }
    .section2 .cards section .card:hover p{
      color:white; 
    }
    .section2 .cards section .card:hover em{
      color:rgb(199, 253, 5); 
      font-weight:bolder; 
    }
    .section2 .cards section .card:hover .mark{
      background-color: rgb(199, 253, 5);
      color:rgb(243,107,57);
    }
    
    @media (max-width:820px){
    .section2{
    padding:1rem;
    }
    .section2 .cards section{
    display:block;
    }
    .section2 .cards section .card{
    margin:10px 0;
    }
    }
    
    
    /*SECTION3*/
    .section3{
    width:100%;
    height:110vh;
    background-image:url("https://scontent-del1-1.xx.fbcdn.net/v/t31.18172-8/23120243_1623908257630020_220709109159870593_o.jpg?_nc_cat=103&ccb=1-5&_nc_sid=174925&_nc_ohc=76e7UIKJSiwAX-KLu18&tn=u0Mw5aZ88y69XVwd&_nc_ht=scontent-del1-1.xx&oh=6001009e318fb49cbc1df2dcd9f652ce&oe=61D0E672");
    background-repeat:no-repeat;
    background-size:60% 100%;
    background-position:left center;
    display:flex;
    align-items:center;
    justify-content:right;
    position:relative;
    height:max-content;
    overflow: hidden;

    }
    
    .section3 section{
    width:39.5%;
    /* position:absolute; */
    right:5%;
    padding:3rem;
    background-color:var(--secondary);
    color:var(--white);
    }
    
    .section3 section .card{
    padding:0.5rem 1rem;
    border:1px solid rgba(255,255,255,0.1);
    margin:10px 0;
    display:flex;
    align-items:center;
    }
    
    .section3 section .card span{
    padding:0 1rem;
    }
    
    @media (max-width:820px){
    .section3{
    display:block;
    background-image:none;
    }
    .section3 section{
    width:100%;
    position:static;
    padding:1rem;
    }
    }
    
    /*SECTION4*/
    .section4{
    align-items:top;
    padding:3rem;
    background-color:#f3f7f6;
    background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)), url(".https://i.ibb.co/1v2CTjz/shape.png");
    background-repeat:no-repeat;
    }
    
    .section4 .title_header{
    padding:3rem;
    width:60%;
    }
    
    .section4 section{
    width:100%;
    }
    
    
    .section4 .cards {
    width: calc(100% - 2em);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 1em;
    grid-template-areas: "a a b c" "a a d d";
    width: 100%;
    }
    
    .section4 .card {
    width: 100%;
    position: relative;
    transition: all 0.25s ease;
    cursor: pointer;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    }
    .section4 .card:last-child {
    margin-bottom: 0;
    }
    .section4 .card:before {
    height: 0;
    content: "";
    display: block;
    padding-bottom: 47.36%;
    }
    .section4 .card.content:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    content: "";
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), black);
    }
    .section4 .card:nth-child(1) {
    grid-area: a;
    }
    .section4 .card:nth-child(2) {
    grid-area: b;
    }
    .section4 .card:nth-child(3) {
    grid-area: c;
    }
    .section4 .card:nth-child(4) {
    grid-area: d;
    }
    .section4 .card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    .section4 .card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    .section4 .card-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    }
    .section4 .card-label {
    position: absolute;
    top: 0.45rem;
    left: 0.45rem;
    background: #089f8a;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 0.7em;
    color: white;
    padding: 0.5em;
    }
    .section4 .card-title {
    position: absolute;
    left: 1em;
    bottom: 1em;
    color: #d6dbeb;
    z-index: 5;
    font-size: 0.8em;
    }
    .section4 .card.form {
    position: relative;
    }
    .section4 .card.form:before {
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    }
    .section4 .card.form:after {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: calc(100% - 1em);
    height: calc(100% - 1em);
    content: "";
    background: #252833;
    }
    .section4 .card.form .form-title {
    position: absolute;
    top: 3rem;
    left: 3rem;
    font-size: 7vw;
    font-weight: 900;
    z-index: 5;
    text-transform: uppercase;
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    }
    .section4 .card.form .form-title:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    content: "More";
    opacity: 0.5;
    filter: blur(10px);
    transition: all 0.25s ease;
    z-index: 2;
    background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    transform: translateX(-50%) translateY(-50%);
    }
    .section4 .card:nth-child(2) .card-label {
    background: #ef4e7b;
    }
    .section4 .card:nth-child(3) .card-label {
    background: #1098ad;
    }
    .section4 .card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
    }
    .section4 .card:hover .form-title:before {
    filter: blur(3px);
    opacity: 0.7;
    }
    
    @media (max-width:820px){
    .section4{
    padding:1rem;
    }
    .section4 .title_header{
    padding:1rem;
    width:100%;
    }
    .section4 .cards {
    width: calc(100% - 2em);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-gap: 1em 0em;
    grid-template-areas: "a" "a" "b" "c" "d";
    width: 100%;
    }
    }

    /*CONTACT FORM*/
    .contact{
    padding:3rem;
    background-color:#f3f7f6;
    background-size:cover;
    display:flex;
    position:relative;
    }
    
    .contact section{
    width:100%;
    margin:auto;
    position:relative;
    }
    
    .contact section form{
    width:80%;
    background-color:var(--white);
    padding:2rem 1rem;
    box-shadow: 0 0 20px 0 #dddddd8c;
    border-radius:30px;
    
    }
    
    .contact section input{
    width:100%;
    padding:1rem;
    background-color:#f3f7f6;
    border:0;
    }
    
    .contact section textarea{
    width:100%;
    padding:1rem;
    resize:none;
    background-color:#f3f7f6;
    border:0;
    }
    
    .contact section button{
    margin:auto;
    border:0;
    display:block;
    color:var(--white);
    }
    
    .contact_info ul{
    display:flex;
    align-items:center;
    width:90%;
    margin:auto;
    }
    
    .contact_info ul li{
    padding:1rem;
    list-style:none;
    line-height:1.8em;
    } 
    
    .contact_info ul li .fa{
    color:var(--secondary);
    padding:15px;
    background-color:var(--white);
    border-radius:10px;
    font-size:2em;
    box-shadow: 0 0 20px 0 #dddddd8c;
    width:60px;
    text-align:Center;
    }
    
    @media (max-width:820px){
    .contact{
    display:block;
    padding:1rem;
    }
    .contact section form{
    width:100%;
    }
    .contact_info ul{
    width:100%;
    }
    }
    
    /*FOOTER*/
    footer{
    width:100%;
    background-color: #000;
    background-attachment:local;
    color:var(--white);
    padding:3rem 0;
    }
    
    footer a{
    color:var(--white);
    }
    
    footer a:hover{
    color:var(--primary);
    }
    
    footer .top_section{
    padding:1rem;
    display:flex;
    align-items:center;
    }
    
    footer .top_section section{
    width:33%;
    display:flex;
    align-items:center;
    justify-content:center;
    }
    
    footer .top_section section span{
    padding:1rem;
    }
    
    footer .top_section section span .fa{
    font-size:2em;
    color:var(--primary);
    }
    
    footer .middle_section{
    padding:1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    }
    
    footer .middle_section span{
    display:block;
    padding:1rem 0;
    text-align:center;
    }
    
    footer .middle_section span a{
    margin:0 20px;
    }
    
    footer .middle_section span a .fa{
    font-size:1.5em;
    }
    
    footer .bottom_section{
    
    text-align:center;
    font-size:13px;
    padding:1rem 0;
    }
    
    @media (max-width:820px){
    footer{
    background-attachment:local;
    }
    
    footer .middle_section{
    display:block;
    }
    footer .middle_section span a{
    white-space:nowrap;
    margin:10px ;
    }
    }
    
    
    /*ADDITIONAL*/
    #roll_back{
    position:fixed;
    bottom:2rem;
    right:2rem;
    background-color:#EF5137;
    border-radius:5px;
    border:2px solid var(--white);
    padding:5px 10px;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:999999;
    box-shadow:0px 6px 16px -6px rgba(1,1,1,0.5);
    color:var(--white);
    font-weight:900;
    }
    
    
    .credits{
    background-color:#1e1e1e;
    position:fixed;
    bottom:2rem;
    right:0;
    color:rgba(255,255,255,0.7);
    padding:10px;
    z-index:9999;
    font-weight:600;
    font-size:13px;
    box-shadow:0px 6px 16px -6px rgba(1,1,1,0.5);
    }
    
    .credits a{
    color:rgba(255,255,255,0.7);
    font-weight:200;
    }


    /* image grid */
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  color: #fff;
  font-family: 'Roboto', sans-serif;
}

h2 {
  font-size: 45px;
  font-weight: 300;
  margin: 10px;
}

h2 span {
  font-size: 30px;
}

p {
  font-size: 20px;
}

p.fontCol{
    color:#fff;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-gap: 2px;
  padding: 2% 1%;
}

.container > div {
  cursor: pointer;
  height: 210px;
  background-size: cover;
  background-attachment: fixed;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  transition: all 0.5s ease-in;
}

.container > div:hover {
  opacity: 0.7;
  transform: scale(0.98);
}

.container > div:nth-of-type(1) {
  grid-column: 1 / 3;
}

.container > div:nth-of-type(6) {
  grid-column: 3 / 5;
}

.container > div:nth-of-type(9) {
  grid-column: 3 / 5;
}

.container > div:nth-of-type(10) {
  grid-column: 1 / 3;
}

.bg1 {
  background: url('images/g2.jpeg');
}

.bg2 {
  background: url('images/g1.jpeg');
  color: #333;
}