/*
Theme Name:     Studio Woensel West
Theme URI:      
Description:    Twentytwentyfour child theme.
Author:         Sem Sannen
Author URI:     https://semsannen.com
Template:       twentytwentyfour
Version:        0.1.0
*/

@import url('./fonts/fonts.css');

html {
    scroll-behavior: smooth;
}

:where(.wp-site-blocks) > * {
    margin-block-start: 0px;
}

img {
    pointer-events:none;
}


*{
    font-family: 'Titling Gothic Narrow Medium', sans-serif;
}

/* FOR THE HEADER */
.custom-logo {
    width: 60px; /* Set your desired width */
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure responsiveness */
}

/* TO MAKE THE W INLINE WORK */
.is-style-asterisk:before {
    display: inline-block;
}
.is-style-asterisk {
    display: flex;
    align-items: flex-end;
} 

.setWidthToFull{
    width: 100% !important;
}
.setWidthToFull_wrapper{
    width: 100% !important;
}
.setWidthToFull > img{
    width: 100% !important;
}

.setWidthToFull > div > p {
    width: 100% !important;
}

/* TO MAKE THE W ON THE TOP SEGMENT WORK */
.setDisplay {
    position: relative;
}
.ornate-w{
    position: relative;
    z-index: 9999;
    left: 25%;
    top: 20vh;
}
.ornate-w svg{
    position: absolute;
    top: 0;
    right: 0;
    width: 10vw;
}
.topSection {
    overflow: hidden;
    margin-top: 0px;
}

/* Hide certain elements on desktop/mobile */
.hideOnDesktop {
    display: none !important;
}
.hideOnMobile {
    display: flex !important;
}
.hideElement {
    display: none !important;
}

.setHeightWork > * {
    width: 33vw !important; 
}

.makeHorizontalScrollPossible {
    overflow-x: scroll;
    width: 100%;
    align-items: stretch;
}

.setQuoteWidth > * {
    width: 200px;
}

/* .socialIconsSize {
    width: 50%;
    overflow: hidden !important;
} */

.socialIconsSize > ul{
    transform: scale(2);
    transform-origin: top left;
    margin-bottom: 10% !important;
}

.aanbodSelection {
    cursor: pointer;
}

.setPaddingToZero {
    padding: 0px !important;
}

.stylingFormButton .gform-button--width-full {
    border-radius: 50px;
    color: black;
    padding: 0.8rem;
    border: none;
    cursor: pointer;
}

.stylingFormButton .gform-button--width-full:hover {
    transition: .3s;
}

.gravityFormsRodeButton .gform-button--width-full {
    background-color: var(--wp--preset--color--swwred);
}

.gravityFormsRodeButton .gform-button--width-full:hover {
    background-color: var(--wp--preset--color--swwyellow); 
}

.gravityFormsOutlineButton .gform-button--width-full {
    border: solid 1px #000000; 
    background-color: white;
}

.gravityFormsOutlineButton .gform-button--width-full:hover {
    box-shadow: inset 0 0 0 1px #000000; /* Inner border effect */
}

.gravityFormsGroeneButton .gform-button--width-full {
    background-color: var(--wp--preset--color--swwgreen);
}

.gravityFormsGroeneButton .gform-button--width-full:hover {
    box-shadow: inset 0 0 0 1px #000000; /* Inner border effect */
    transition: .3s;
}


/* Add hover to buttons */
.hoverEffect > *:hover {
    box-shadow: inset 0 0 0 1px #000000; /* Inner border effect */
    transition: .3s;
}
.hoverEffectYellow >*:hover {
    background-color: var(--wp--preset--color--swwyellow) !important; /* Yellow background (SWW-Yellow) on hover */
    transition: .3s;
}
.hoverEffectPink >*:hover {
    background-color: var(--wp--preset--color--swwpink) !important; /* Pink background (SWW-Pink) on hover */
    transition: .3s;
}

@media only screen and (max-width: 1100px) {
    .makeDirectionColumnTablet {
        flex-direction: column;
    }  

    .ornate-w{
        left: 26%;
        top: 12rem;
    }

    .ornateWonHome .ornate-w{
        left: 27%;
        top: 7rem;
    }

    .setHeightWork > * {
        width: 50vw !important;
    }
}

@media only screen and (max-width: 700px) {
    .makeFlexDirectionColumn {
        flex-direction: column;
    }  
    .giveMobilePadding {
        padding: 15px !important;
        width: 100vw;
    }
    .giveMinMobileHeight {
        min-height: 250px !important;
    }
    .changeTopMarginMobile {
        margin-top: 0px !important;
    }
    .ornate-w{
        left: -5%;
        top: 28rem;
        transform: scale(2);
    }

    .ornateWonHome .ornate-w{
        left: -4%;
        top: 16rem;
    }

    /* Show certain elements on desktop/mobile */
    .hideOnDesktop {
        display: flex !important;
    }
    .hideOnMobile {
        display: none !important;
    }
    /* Remove any gaps */
    .removeGap {
        gap: 0px !important;
    }
    .setPaddingToZeroMobile {
        padding: 0px !important;
    }


    .setHeightWork > * {
        width: 75vw !important;
    }

    .giveBackgroundOffset {
        position: relative;
        z-index: -1000;
        background-color: #ffffff !important;
        padding: 10px;
    }
    .giveBackgroundOffset::before {
        content: '';
        position: absolute;
        top: -5px;
        width: 100%;
        height: 30%;
        z-index: -30;
    }
    .giveBackgroundPink::before {
        background-color: var(--wp--preset--color--swwpink); 
    }
    .giveBackgroundYellow::before {
        background-color: var(--wp--preset--color--swwyellow); 
    }
    .giveBackgroundRed::before {
        background-color: var(--wp--preset--color--swwred); 
    }



    .setWidthToFullMobile{
        width: 100% !important;
    }
}



.gform_confirmation_message {
    background-color: var(--wp--preset--color--swwgreen);
    padding: 1.25rem;
    border-radius: 6px;
}
.gform_confirmation_message > h3{
    margin-top: 0px;
}