/* The styling of my body */

body{
    padding: 0;
    margin: 0;

    box-sizing: content-box;
    overflow-x: hidden;

}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    
    box-sizing: border-box;
}



header {
    background: linear-gradient(#fb991c, #1c7690, #03324e);
    padding: 60px 0; /* or adjust as needed */
}





/* This is the styling of my nav bar */

nav{
    padding-bottom: 50px;
    
}


nav h1{
    font-size: 6rem;
    /* font-family: cursive, sans-serif; */
    font-family: montserrat, sans-serif;
    font-weight: 800;
    color: #000;
    
}


nav a{
    text-decoration: none;
}

/* The first section */

.nichetext h1{
    margin-top: 9vh;
    font-weight: 700;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-family: montserrat, sans-serif;

}

.nichetext h4{
    padding-left: 20px;
    color: #fff;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    font-weight: 500;
    font-family: montserrat, sans-serif;
}


.nichetext button{
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    background-color: #fb9b1b;
    font-weight: 700;
    font-size: 3rex;
    
}

/* The styling of my creator section */
main .creatorsec{
    background-color: #03324e;
    padding-bottom: 50px;
    
}

main .creatorsec h1{
    font-weight: 700;
    font-family: montserrat, sans-serif;
    color: #fff;
}

main .creatorsec .creatorsimgs{
    display: flex;
    
}

main .creatorsec .creatorsimgs2{
    display: flex;
    
}

main .creatorsec .creatorsimgs img{
    /* display: flex; */
    
    margin-bottom: 20px;
    border-radius: 30px;
}

main .creatorsec .creatorsimgs2 img{
    /* display: flex; */
    
    margin-bottom: 20px;
    border-radius: 30px;
}

/* This is the styling of my testimony section */

main .testimonysec{
    background-color: #1c7690;
    
    color: #fff;


}

main .testimonysec1{
    padding: 5px;
}




.testimonysec img{
    border-radius: 50%;
    border: 7px #2596be #000;
}

main .testimonysec1 .phone{
    display: none;
}
/* Styling of my flexed section with youtube videos */

main .flexxed {
    background: linear-gradient(to top, #03324f, #fb991d, #1c7691);
    color: #fff;
    width: 100%;
    padding: 50px 0;
}

main .flexxed > .container {
    max-width: 1200px; /* keeps content readable */
    margin: 0 auto;
    padding: 0 20px;
}




.noshow{
    display: none;
}

.noshow1{
    display: block;
}

/* Styling for my footer */

footer{
    background-color: #ec8804;
    color: #000;
}

footer .firsttext{
    padding-top: 8vh;
}


footer .firsttext h1{
    font-weight: 900;
    font-size: 3rem;
    font-family: sans-serif;
}

footer .firsttext h2{
    font-weight: 600;
    font-family: cursive;
}

footer .seconddiv{
    padding-top: 10vh;
}

footer .seconddiv img{
    

    border-radius: 50%;
}

footer .seconddiv button{
    padding: 3vh 33vh;
    border: none;
    border-radius: 10px;
    background-color: #0453ec;
    font-size: 3rex;
    font-weight: 700;
    color: #fff;
}



/* This is the styling of my socials icons link */
footer .socials{
    display: flex;
    justify-content: center;
    gap: 50px;
    padding: 5%;
}

footer .socials i{
    font-size: 3rem;
    color: #fff;
}

/* The styling of my copyright text */
footer .copyright h1{
    font-size: 3rex;
    padding: 4%;

    

}

/* My section for responsiveness */

@media (max-width: 768px) {

    nav{
        display: none;
        
    }


    .firstyoutubevid {
        width: 100%;
        height: 40vh;
         
        
    }

    #contactButton{
        margin-bottom: 5vh;
    }

    #contactButton2{
        margin-bottom: 5vh;
        padding: 10px;
        font-size: 2rex;
    }

    #contactButton4{
        margin-bottom: 5vh;
        padding: 10px;
        font-size: 2rex;
    }


    .noshow{
        display: flex;
        
    }

    

    .noshow1{
        display: none;
    }


    

    .nichetext h1{
        margin-top: 4vh;
        color: #000;
    }

    .nichetext h4{
        color: #000;
        text-shadow: none;
    }

    header{
        height: 105vh;
    }

    marquee h1{
        font-size: 2rex;
    }

    marquee h2{
        font-size: 1rem;
    }

    .creatorsec{
        display: none;
    }

    .testimonysec img{
        margin-bottom: 10px;
    }

    main .testimonysec1{
        
        height: 98vh;
        
    }

    main .testimonysec1 .phone{
        display: block;
        color: black;
    }

    main .testimonysec1 .phone div{
        padding-left: 10px;
        padding-right: 10px;
    }

    main .testimonysec1 h5{
        
        font-size: 2rex;
        
    }

    main .testimonysec1 h1{

        font-size: 3rex;
        
    }


    main .testimonysec2{
        height: 40vh;
    }

    

    .third{
        display: none;
    }

    footer .firsttext{
        padding: 10px;
    }

    footer .firsttext h1{
        font-size: 3rex;
    }

    footer .firsttext h2{
        font-size: 2rex;
    }

    footer .linkedintext{
        padding-top: 1vh;
    }

    footer .seconddiv button{
        padding: 3vh 8vh;
        border: none;
        border-radius: 10px;
        background-color: #030e24;
        font-size: 2rex;
        font-weight: 600;
        color: #fff;
    }

    .seconddiv img{
        width: 150px;
    }

    .seconddiv .row{
        display: flex;
        flex-direction: column-reverse;
        
    }

    footer .copyright h1{
        font-size: 2rex;
    }

    footer{
        padding-bottom: 5vh;
    }

   
}

/* @media (max-width: 1920px) {
    .flexxed {
      
      
      display: flex;
      justify-content: center;
      
    }
  
    
  } */