/*

    1. IMPORTS 
    2. COLOR PALLET
    4. GLOBAL
    5. NAVIGATION
      *****See header.css******
    6. MAIN
      6.1 TYPOGRAPHY
      6.2 LAYOUT
      6.3 COMPONEMNTS
      6.4 IMAGES
      6.5 MEDIA QUERIES
    
    10. FOOTER
      *****See footer.css******








/* 
======================================================================== 
                              1. IMPORTS 
======================================================================== 
*/




/* 
======================================================================== 
                            2. COLOR PALLET 
======================================================================== 
*/

/* 
======================================================================== 
                             3. GLOBAL
======================================================================== 
*/

*,
*:before,
*:after {
    box-sizing: border-box;
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;

}





.fa {
    padding: 20px;
    font-size: 130px;
    width: 150px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
  }

/* 
======================================================================== 
                             5. MAIN
======================================================================== 
*/

/* 
*******************************
4.1 TYPOGRAPHY (NAV)
*******************************
*/

.content-box-left p, .content-box-right p{
    margin-block: 10px;
}


/* 
*******************************
4.2 LAYOUT (MAIN)
*******************************
*/

.main-content {
    background-image: url("/assets/BG1.jpg");
    background-position: center;
    background-size: 100% 212%;
    height: 100%;
}

.main-page-top-heading-wrapper .main-page-top-heading {
    opacity: 0;
    animation: fadeInAnimation ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

.main-page-top-heading-wrapper {
    margin: CLAMP(1.5REM, 2VW, 3REM);
}

.main-page-top-heading {
    display: flex;
    margin: 50px;
    justify-content: center;
}


.main-page-top-button-wrapper {
    display: flex;
    margin: 50px;
}

.button {
    background-color: red;
    border: none;
    color: whitesmoke;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    margin: auto;
    font-size: 33px;
    cursor: pointer;
    box-shadow: 3px 3px 25px 10px grey;
    font-family: 'Bebas Neue', cursive;
    transition: all 0.3s ease-in-out;

}

.button:hover {
    transform: scale(1.1);
  }

.sidebar {
    display: none;
}

.main-page-bottom{
    display:flex;   
    flex-wrap: wrap;
}

.content-box-left, .content-box-right{
    width: 100%;

    display: inline-grid;
    gap: -25px;
    padding: 15px;
    padding-inline: 50px;
    grid-template-columns: auto auto auto;
}

.grid-item{
    display: flex;
    padding: 25px;
    align-items: center;

}

.content-box:nth-child(2), .content-box:nth-child(4){
    margin-left: auto; 
    margin-right: 0;
}


.content-box-left .grid-item:nth-child(1), .content-box-left .grid-item:nth-child(2), .content-box-right .grid-item:nth-child(3), .content-box-right .grid-item:nth-child(2), .photo-box {
    background: rgb(129 133 129 / 20%);  
    backdrop-filter: blur(10px);
  

}
.content-box-left .grid-item:nth-child(3), .content-box-right .grid-item:nth-child(1){
    margin: auto;
}

.content-box-left{
    grid-template-columns: auto auto 40%;
    /* font-family: 'Montserrat'; */


    }

.content-box-right{
grid-template-columns: 40% auto auto;
/* font-family: 'Montserrat'; */

}

.content-box:nth-child(2), .content-box:nth-child(4), .content-box:nth-child(6){
    margin-right:50px;
}



.content-box {
    margin-block: 1rem;


}

/* 
*******************************
4.3 IMAGES
*******************************
*/

.logo-sol{
    width:300px;
    height:300px;
}

.craig-img{
    width:450px;
    height:300px;
}

.artist-img{
    width: clamp(200px, 100%, 500px);

}

.cow_twins{
    width: 500px;
    height: 250px;
    margin:auto;
    box-shadow: 3px 3px 25px 10px grey;

}

.photo-box{
    display:none;
}
/* 
*******************************
4.4 MEDIA QUERIES
*******************************
*/


@media only screen and (max-width : 1630px) {


.content-box-left, .content-box-right{

    /* display: block; */
    width: 80%;
    justify-content: center;
    margin: auto;
    grid-template-columns: auto auto;
    padding-inline: o;


}

.content-box-left .grid-item:nth-child(3), .content-box-right .grid-item:nth-child(1){
    display:none;
}


}

@media only screen and (max-width : 1250px) {

    .content-box-left .grid-item:nth-child(1), .content-box-right .grid-item:nth-child(3){
        display:none;
    }
    
    .photo-box{
        display: flex;
        margin: auto;
    }

    .content-box-left, .content-box-right{

        width: 90%;
    margin: auto;
    padding-inline: 0;
    }

    .photo-box{
        display: block;
        margin: auto;
        width: 100%;
    }

    .photo-box .photo-item:nth-child(1), .photo-box .photo-item:nth-child(2){
        display:flex;
        justify-content: center;
        margin:25px;

        }
}



@media only screen and (max-width : 450px) {


    .craig-img {
      width: 285px;
      height: 190px;
    }
    

    .button {
        
        font-size: 25px;

    }

    .main-page-top-heading {
     margin:0;

    }
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

@keyframes fadeInOutAnimation {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

}