/*
 Theme Name:   Bootscore Child
 Description:  Bootscore Child Theme
 Author:       Bootscore
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/

/* Colours*/

:root {
  --charcoal-slate: #3A3A3A; /* Deep grey for text and strong accents */
	--dark-slate: #2e2e2e;
	--black-slate: #282828;
  --warm-sand: #efece7;      /* Soft neutral for backgrounds */
  --porcelain-mist: #F8F5F2; /* Light off-white for clean backgrounds */
  --burnt-amber: #C35000;    /* Bold accent color for buttons and highlights */
  --stone-taupe: #5C574F;    /* Earthy grey for secondary text and accents */
	--white: #ffffff;	/* White */
}



/* Logo */
.navbar-brand img {
height: 2.5rem;
color: var(--bs-secondary);
margin: 0;
}

/* Nav Bar */
.bg-body-tertiary{background-color: var(--white)!important;}

/* Backgrounds */
.charcoal-slate{background: var(--charcoal-slate); color:var(--white);}
.warm-sand{background: var(--warm-sand)}
.porcelain-mist{background: var(--porcelain-mist)}
.burnt-amber{background: var(--burnt-amber)}
.stone-taupe{background: var(--stone-taupe)}
.white{background: var(--white)}




/* Fonts */
body{font-family: "Lora", serif;color: var(--black-slate)}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .btn, .nav-link, .display-6  {font-family: "Poppins", sans-serif;font-weight:400!important;}
.btn{font-size:1.1rem}

.wp-block-heading{margin-top:1.5rem}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
  
    line-height: 1.2;
    color:var(--bs-heading-color)
}

/* Blockquote */

blockquote p{font-family: "Poppins", sans-serif;font-weight:400!important;margin-top:2rem;margin-bottom:0;font-size:1.4rem;font-style:italic;}

.blockquote-footer {
margin-top: 1rem;
margin-bottom: 1rem;
font-size: 0.9rem;
	color: #282828;font-style:normal;}

.blockquote{border-left:1px solid; padding-left:1rem;}

/* Mobile default: normal body copy */
.lead-md { font-size: 1rem; font-weight: 400; }

/* Desktop (md and up): apply Bootstrap lead styles */
@media (min-width: 768px) {
  .lead-md { font-size: 1.25rem; font-weight: 300; }
}

/* Link */
a{color: black;}
a:hover{color: var(--burnt-amber);}


/* Container */
    .container {
        max-width: 2000px; /* Remove the max-width restriction */
		padding-left: 4vw;
			padding-right: 4vw;

    }



section{padding-bottom:2rem;padding-top:2rem}@media(min-width:768px){section{padding-bottom:3rem;padding-top:3rem}}@media(min-width:1200px){section{padding-bottom:5rem;padding-top:5rem}}.bsb-hero-2 img{-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:auto;mask-size:auto; margin:0 0 1.5rem;}


.portfolio-section, .portfolio-section .container-fluid .row>*{padding: 0!important;padding-left:0!important;padding-right:0!important;}

.portfolio-section .container-fluid,  {}

        .portfolio-item {
            position: relative;
            overflow: hidden;padding-top: 100%;
           background-repeat: no-repeat;
background-size: cover;
background-position: center center;
            transition: all 0.3s ease-in-out;
        }
        .portfolio-item img {
            width: 100%;
            transition: transform 0.3s ease-in-out;
        }
        .portfolio-item:hover img {
            transform: scale(1.05);
        }
        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(50, 50, 50, 0.9);
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
            text-align: center;
            font-size: 1.2rem;
            font-weight: bold;
        }

.portfolio-overlay svg{fill: #ffffff;width: 50%;}
        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
        .btn-primary {
            background-color: var(--burnt-amber);
            border-color: var(--burnt-amber);
			color: #ffffff!important;
        }
        .btn-primary:hover, .btn-outline-primary:hover  {
            background-color: #b84e1e;
            border-color: #b84e1e;
        }

.btn-outline-primary{border-color: var(--charcoal-slate);color: var(--charcoal-slate);}




/* Carousel */


        .carousel-item img {
            width: 100%;
            height: 100vh; /* Full viewport height */
            object-fit: cover; /* Ensures full coverage */
            object-position: center;
        }


/* Media query for mobile devices */
@media (max-width: 767.98px) {
  .carousel-item img {
    height: 33vh; /* 30% of viewport height on mobile */
  }
}

        .parallax-content {
            position: absolute;
            z-index: 2;
            text-align: center;
            max-width: 700px;
            padding: 20px;
        }

        .parallax-content h2 {
            font-size: 2.5rem;
            font-weight: bold;
        }

        .parallax-content p {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

        
.logos-white {
  position: relative;
  background: var(--porcelain-mist); /* Background color */
  height: 10vh;
  overflow: hidden; /* Prevent overflow from rotated background */
    z-index: -2;
}

.logos-white::before {
  content: "";
  position: fixed;
 top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background-image: url('https://hagueandgray.co.uk/site2024/wp-content/uploads/2025/02/logos-white.svg');
  background-repeat: repeat;
  background-size: 300px 300px;
  transform: rotate(30deg);
  transform-origin: center;
  z-index: -1; /* Place behind content */
}


/* Work Post */

   .full-width-image {
      width: 100%;
      height: 50vh;
      object-fit: cover; /* Ensures the image covers the container without distortion */
     position: ;
    }

.partner-logo svg{height: 200px;fill:var(--charcoal-slate);}

/*  Icons */
.icon{height: 1.5rem;
  width: auto;margin-right: 0.5rem;}

a:hover .icon{fill: var(--burnt-amber)}

/* Footer */

.footer .half {max-width:50%;}

.footer-logo{width: 80%; height: auto;margin-bottom: 2rem;fill: var(--white);
  transform: rotate(90deg); /* Rotates the element by 90 degrees */
  transform-origin: center; /* Ensures rotation happens from the center */}

@media (max-width: 767.98px) {
	.footer-logo{width: 45%;}
  }

.footer ul{list-style:none; padding: 0;}


/* Insights */

.insight img{margin-bottom: 1.5rem;}

/* charcoal-slate */

.charcoal-slate .card{background:var(--charcoal-slate);color: white;border-radius:0; border:0;margin-top: 1rem;transition: 0.3s ease-in-out;} 


.white .card{background:white;color: var(--charcoal-slate);border-radius:0; border:0;margin-top: 1rem;transition: 0.3s ease-in-out;} 


.charcoal-slate .card img, .white .card img{border-radius:0;}

.charcoal-slate .card:hover{background:var(--charcoal-slate);} 

.white .card:hover{background:white;} 

.white a, .charcoal-slate a{text-decoration: none !important;}

/* Forms */

.gf_progressbar_wrapper{display:none!important;}
.gform_next_button, .gform_button{background: var(--burnt-amber)!important; font-family: "Poppins", sans-serif !important; font-size:1.1rem!important;font-weight: 400 !important;border-radius: var(--bs-border-radius-pill) !important;}
.gfield_label{font-family: "Poppins", sans-serif !important; font-size:1.1rem!important;font-weight: 400 !important;}
.gform_previous_button{font-family: "Poppins", sans-serif !important; font-size:1.1rem!important;font-weight: 400 !important;border-radius: var(--bs-border-radius-pill) !important;background:none!important;}


/* Tables */

thead, tbody, tfoot, tr, td, th {
border-color: black;
border-style: solid;
border-width: 0.5px;
padding: 5px;
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* Pagination */

.pagination {
--bs-pagination-color: var(--burnt-amber)!important; margin-right: 0.5rem;
}
pagination-dots>li {
display: inline-block;
	margin-right: 0.3rem!important;}
/* Search Links */
	.search-link {text-decoration:none; }
.search-link .porcelain-mist, .search-link .porcelain-mist h1 {transition: background-color 0.4s ease;}
.search-link .porcelain-mist:hover{background: white;}
.search-link .porcelain-mist:hover p, .search-link .porcelain-mist:hover h3 {color: var(--black-slate);}

/* accordian */
.accordion-header{margin-top: 0;}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--black-slate);
    text-align: left;
    background-color: var(--porcelain-mist);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition:var(--bs-accordion-transition)
}

.accordion-button:not(.collapsed) {
    color: var(--black-slate);
    background-color: var(--warm-sand);
    box-shadow:inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color)
}