@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=League+Spartan:wght@100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
:root{
    --heroBgColor:rgb(32, 5, 38);
    --headingColor:rgb(189, 242, 77);
    --subheadingColor:rgb(255, 255, 255);
    --headingSize:12vw;
    --subheadingSize:3vw; 
    --borderColor:2px solid white;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
     font-family: "League Spartan", sans-serif;
}
body,html{
    scroll-behavior: smooth;
}
.main{
    width: 100%;
    height: 100%;
    background-color: var(--heroBgColor);
}
.heroSection{
    width: 100%;
    height: 60vw;
    position: relative;
    background-color: var(--heroBgColor);
    border-bottom: var(--borderColor);

    
}
.heroText{
    position: absolute;
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.heroSection h1{
    font-size: var(--headingSize);
    font-family: "League Spartan", sans-serif;
    color: var(--headingColor);
    font-weight: 700;
    text-shadow: 10px 8px 20px black;
}
.heroSection h2{
    font-family: "Raleway", sans-serif;
    font-weight:300;
    color:  white;
    font-size: var(--subheadingSize);
}
.heroSection span{
    font-family: "Raleway", sans-serif;
    font-weight:lighter;
    color:  white;
    font-size: var(--subheadingSize);
}
.aboutSection{
    width: 100%;
    min-height: 55vw;
    height: max-content;
    position: relative;
    background-color: var(--heroBgColor);
    padding-bottom: 30px;
    
}
.aboutText{
    width: 100%;
    height: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.aboutText h2 {
    font-size: var(--headingSize);
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    color: var(--headingColor);
    letter-spacing: 0px;
    padding: 20px 0px;
}
.aboutText p{
    padding: 0% 14%;
    color: var(--subheadingColor);
    font-size: 3vw;
    font-family: "League Spartan", sans-serif;
    font-weight: lighter;
}
.aboutText p b{
    font-weight: 600;
}
.aboutText span{
 font-family: "League Spartan", sans-serif;
  text-align: center;
  font-size: 2vw;
  color: white;
  font-weight: 500;
  text-transform: uppercase;

}
.aboutLink,.serviceLink{
    width: max-content;
    margin: 0 auto;
    padding: 20px 40px;
    border: 2px solid var(--headingColor);
    border-radius: 80px;
    font-size: 4vw;
    color: var(--subheadingColor);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    &:hover{
        background-color: var(--headingColor);
        color: var(--subheadingColor);
        border: 2px solid var(--subheadingColor);
    }
}
.serviceLink img,.aboutLink img{
    width: 4vw;
}
.serviceSection{
    width: 100%;
    height: 100%;
    min-height: 110vh;
    position: relative;
    background-color: var(--heroBgColor);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--subheadingColor);

    
}
.serviceText{
    width: 95%;
    height: 90%;
    margin-top: 5%;
    background-color: var(--headingColor);
    border-radius: 40px;
    padding: 40px 30px;
}
.service-heading {
    width: 100%;
    text-align: center;
    font-size: var(--headingSize);
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    letter-spacing: 0px;   
}
.allServiceBox{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.service{
    width: 100%;
    display: flex;
    gap:50px;
    align-items: center;
    border-bottom: 2px solid black;
}
.serveNum span{
 font-size: 9.5vw;
 font-family: "Bebas Neue", sans-serif;
}
.serveName h2{
padding-top: 30px;
font-size: 3vw;
 letter-spacing: 2px;
 text-decoration: underline;
 text-transform: uppercase;
 font-weight: 700;
}
.serveName h3{
 padding-top: 10px;
 font-size: 3vw;
 font-weight: 400;
}


.trustedSection{
    width: 100%;
    min-height:55vw;
    height: max-content;
    padding: 30px 30px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--subheadingColor);
}
.trustedSection h2 {
    text-align: center;
    font-size: 10vw;
    font-family: "Bebas Neue", sans-serif;
    font-weight: lighter;
    color: var(--headingColor); 
    letter-spacing: 3px;
    font-weight: 300;
    white-space:nowrap;
}
.brandsName{
    width: 100%;
    height: 100%;
}
.brandsLogo{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.logoLine1,.logoLine2{
    width: 100%;
    height: 5vw;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.logoLine1 img{
    width: 10vw;
    height: max-content;
}
.logoLine2 img{
    width: 8vw;
}
.logoLine2 span {
    font-size: 2.5vw;
    color:  var(--subheadingColor);
    font-family: "Bebas Neue";
}
.brandsVideo{
    width: 100%;
    padding: 30px 10px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.brandsVideo video{
    width: 15vw;
    height: 25.5vw;
}
.trustedSection h3{
    font-size: 2.5vw;
    font-family: "League Spartan", sans-serif;
    color: var(--subheadingColor);
    font-weight: 100;   
    text-align: center;
}

.projectSection{
    width: 100%;
    height:max-content;
    min-height: 55vw;
    background-color: var(--heroBgColor);
    padding-bottom: 40px;
     display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
     border-bottom: 1px solid var(--subheadingColor);
     gap:30px;
}
.projectSection h2 {
    text-align: center;
    font-size: 10vw;
    font-family: "Bebas Neue", sans-serif;
    font-weight: lighter;
    color: var(--headingColor); 
    letter-spacing: 2px;
}
.projectText{
    width: 95%;
    /* min-height: 90vh; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--headingColor);
    border-radius: 40px;
    padding: 30px 30px;
   
}
.projectBox{
    width: 95%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
    
    

}
.projects{
    width:100%;
    height:30vw;
}
.projects img{
    width: 100%;
    height: 100%;
}
.projectText span{
    margin-top: 40px;
    text-align: center;
    font-size: 6vw;
    font-weight: 700; 
}
.socialMediaText{
    width: 95%;
    /* min-height: 90vh; */
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--headingColor);
    border-radius: 40px;
    padding: 30px 30px;
}
.socialMediaBox{
    width: 95%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}
.posts{
    width:100%;
    height:21vw 
}
.posts img{
    width: 100%;
    height: 100%;

}

.socialMediaText span{
    margin-top: 40px;
    text-align: center;
    font-size: 6vw;
    font-weight: 700;
    letter-spacing: -5px; 
}
.reelsText{
    width: 95%;
    /* min-height: 90vh; */
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: var(--headingColor);
    border-radius: 40px;
    padding: 30px 30px;
}
.reelsBox{
    width: 95%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}
.reels:nth-child(8){
    grid-column: span 2;
    height: 15vw;
}
.reels:nth-child(9){
    grid-column: span 2;
    height: 15vw;
}
.reels{
    width:100%;
}
.reels video{
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.reelsText span{
    text-align: center;
    font-size: 6vw;
    font-weight: 700; 
    letter-spacing: -5px;
}

.contactUs{
    width: 100%;
    height:max-content;
    padding-bottom: 40px;
    display: flex;
    align-items: center;
    flex-direction: column; 
    gap:10px;   
}
.contactUs h2 {
    text-align: center;
    font-size: 5vw;
    font-family: "Raleway", sans-serif;
    font-weight: 800;
    color: var(--subheadingColor); 
    text-transform: uppercase;
    margin-top: 40px;
}
.contactUsText{
    width: 95%;
    min-height:30vw;
    display: flex;
    gap: 20px;
    background-color: var(--headingColor);
    border-radius: 40px;
    padding: 30px 30px;
}
.leftContactUs{
    width: 50%;
    height: 100%;
    display: flex;
    align-items:start;
    flex-direction: column;
    gap: 25px;
}
.leftContactUs h4{
    font-size: 3vw;
    font-family: "League Spartan", sans-serif;
    font-weight: 500;
}
.leftContactUs a{
    font-size: 3vw;
    font-family: "League Spartan", sans-serif;
    font-weight: 400;
    text-decoration: none;
    color: var(--headingColor);
    width: 90%;
    padding: 15px 15px;
    background-color: black;
    text-align: center;
    border-radius: 15px;
    box-shadow: 7px 20px 20px rgb(65, 65, 65);
}
.rightContactUs{
    width: 50%;
    height: 100%;
    display: flex;
    align-items:start;
    flex-direction: column;
    gap: 25px;
}
.connectLink{
    width: 100%;
    height: max-content;
    padding-top: 150px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.connectLink a{
    font-size: 3vw;
    font-family: "League Spartan", sans-serif;
    font-weight: 400;
    text-decoration: none;
    color: black;
}
.connectLink :nth-child(2){
    text-decoration: underline;
}
.connectLink :nth-child(3){
    text-decoration: underline;
}
.address{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: end;
    padding-top: 40px;
}
.address span{
  font-size: 2vw;
    font-family: "League Spartan", sans-serif;
    font-weight: 400;
    text-decoration: none;
    color: black;  
}
.footer{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
}
.footer h4{
    color: var(--headingColor);
    font-size: 7vw;
    text-shadow: 5px 4px 10px black;
}
.footer span{
    font-size: 3vw;
    color: var(--subheadingColor);
    font-weight: 300;
}


/* RESPONSIVE for Mobiles */

@media (max-width:600px) {
    .aboutText{
    gap: 0px;
    }
    .aboutText h2 {
    padding: 10px 0px; 
    }
    .serviceText {
    width: 85%;
    border-radius: 15px;
    padding: 23px 10px;
    }
    .allServiceBox{
        gap:0px;
    }
    .serveName h2 {
    padding-top: 15px;
    font-size: 4vw;
    letter-spacing: 0px;
    }
    .serveName h3{
      font-size: 4vw;  
    }
    .service{
        gap:30px;
    }
    .serveNum span {
    font-size: 11.5vw;
    }
    .trustedSection h2{
    font-size: 9vw;
    letter-spacing: 0px;
    font-weight: 200;
    }
    .brandsVideo{
     padding: 30px 0px;

    }
    .brandsVideo video {
        cursor: pointer;
    
    }
    .trustedSection h3{
        font-size: 4.5vw;
    }
    .projectText,.socialMediaText,.reelsText,.contactUsText{
    width: 85%;
    border-radius: 15px;
    padding: 23px 10px;
    justify-content: start;

    }
    .socialMediaBox {
        gap:2px
    }
    .reelsBox{
        width: 100%;
        gap: 3px;
    }
    .reelsText span{
        letter-spacing: normal;
    }
    .contactUs h2{
        font-size: 4.5vw;
    }
    .projectSection,.aboutSection{
        padding-bottom: 10px;
    }
    .projectSection{
        gap: 10px;
    }
    .leftContactUs a{
        border-radius: 10px;
        font-size: 3.4vw;
        padding: 10px 10px;

    }
    .connectLink{
        padding-top: 50px;
        gap: 10px;
    }
    .connectLink a{
        font-size: 3.1vw;
    }
    .address{
    padding-top:10px ;
    }
    .address span{
        font-size: 3vw;
    }
    .footer{
        padding-top: 0px;
    }   

}
    @media (min-width: 601px) and (max-width: 911px) {
    .trustedSection h2{
        font-size: 9vw;
    }   
    
}
   /* Responsive for tabs and ipads */
    @media (min-width: 912px) and (max-width: 1366px) {
    .serveName h2,
    .serveName h3 {
        font-size: 3.5vw;
    }

    .trustedSection h2{
        font-size: 9vw;
    }
}