/*
	Theme Name: Sherwood Binder & Box Ltd
	Theme URI: https://www.websitedesignderby.com/
	Description: A theme created by Website Design Derby Ltd
	Author: Website Design Derby Ltd
	Version: v2.0
*/

/* ==================================================
   Global Styles
================================================== */

*, *:after, *:before
{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

:root
{
    --accent-color: #10b16f;
    --transition-speed: 0.5s;
    --curve: cubic-bezier(0.2, 1, 0.3, 1);
}

html
{
   overflow: auto;
   overflow-x: hidden;
   overflow-y: scroll;
   font-size: 100%;
   
   -webkit-text-size-adjust: 100%;
   font-variant-ligatures: none;
   -webkit-font-variant-ligatures: none;
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
}

body
{
    font-family: var(--fontsecondary), Arial, Verdana, Helvetica, sans-serif !important;
    font-size: clamp(1rem, 0.8269rem + 0.4808vw, 1.125rem);
    line-height: 1.8em;
    color: var(--darkgrey);
    background: var(--primarycolour);
    letter-spacing: 0em;
    text-rendering: optimizeLegibility;
}

::selection
{
	background: var(--primarycolourlight);
	color: var(--white);
}

::-moz-selection
{
	background: var(--primarycolourlight);
	color: var(--white);
}

a
{
	color: var(--primarycolourlighter);
	text-decoration: underline;
}

	a:hover
	{
		color: var(--darkgrey);
		text-decoration: none;
	}

.anchor
{
    display: block;
    position: relative;
    top: -170px;
    visibility: hidden;
}

.ratio-3x4
{
  --bs-aspect-ratio: 133.33%;
}

/* ==================================================
   Main Styles
================================================== */

#topcont
{
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

    #topcont span
    {
        margin-bottom: 0;
        line-height: 24px;
        letter-spacing: 0em;
        font-size: 1em;
        font-family: var(--fontprimary), Arial, Verdana, Helvetica, sans-serif !important;
    }
	
        #topcont #topleft
        {
            color: var(--primarycolourlighter);
            font-weight: 800;
        }
      
            #topcont #topleft span a
            {
                color: var(--white);
                font-weight: 800;
                text-decoration: underline;
                
                text-decoration-color: var(--primarycolour);
                text-underline-offset: 6px;
                text-decoration-thickness: 1.5px;
            }
         
            #topcont #topleft span a:hover
            {
                text-decoration-color: var(--primarycolour);
            }
            
                #topcont #topleft span
                {
                    
                }
               
                    #topcont #topleft span:first-child
                    {
                        margin-right: 15px;
                    }
		
		#topcont #topright
		{
			
		}
		
			#topcont #topright ul
			{
				float: right;
				list-style-type: none;
				margin: 0;
			}
			
				#topcont #topright ul li
				{
					float: left;
				}
				
					#topcont #topright ul li a
					{
						color: var(--white);
					}

						#topcont #topright ul li a i
						{
                            float: left;
                            font-size: 1.1em;
                            line-height: 24px;
                            margin-left: 10px;
                            font-style: normal;
						}
						
        					#topcont #topright ul li a:hover
        					{
        						color: var(--primarycolourlighter);
        					}

#headercont
{
    background: var(--primarycolour) url("images/logo-icon-faded.png") no-repeat 90% 30%;
    background-size: clamp(700px, 50%, 800px);
}

	#headercont #headerleft
	{
        
	}
	
		#headercont #headerleft p
		{
			margin-bottom: 0;
		}
	
			#headercont #headerleft p a img
			{
				display: block;
				width: 100%;
				max-width: 330px;
                
                -webkit-transition: max-width 0.1s ease-in-out;
                -moz-transition:    max-width 0.1s ease-in-out;
                -o-transition:      max-width 0.1s ease-in-out;
                -ms-transition:     max-width 0.1s ease-in-out;
                transition:         max-width 0.1s ease-in-out;
			}
	
	#headercont #headerright
	{
		color: var(--white);
		font-family: var(--fontprimary), Arial, Verdana, Helvetica, sans-serif !important;
		font-weight: 800;
		font-size: 1.2em;
		line-height: 1.3em;
	}

#menucont
{
	background: var(--primarycolourlight);
    box-shadow: 0 -15px 15px -12px rgba(0,0,0,0.1), 0  15px 15px -12px rgba(0,0,0,0.1);
}

#gallerycont
{
    position: relative;
    height: 80vh;
    min-height: 460px;
    max-height: 560px;
    width: 100%;
    overflow: hidden;
}

    #gallerycont #galleryslider
    {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: 0;
        
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }
    
        #gallerycont #galleryslider #galleryinner
        {
            background: linear-gradient(to bottom, rgba(5,54,34,0.3), rgba(5,54,34,0.7));
        }
        
            #gallerycont #galleryslider #galleryinner h2
            {
                font-size: 2.5em;
            }
            
#breadcrumbscont
{
	font-size: 0.9em;
	background: var(--lightgrey);
	color: #999;
	font-weight: 800 !important;
	font-family: var(--fontprimary), Arial, Verdana, Helvetica, sans-serif !important;
	line-height: 1.4em;
    letter-spacing: 0.01em;
}

    #breadcrumbscont a
    {
    	color: var(--primarycolourlighter);
    	text-decoration: none;
    }
    
        #breadcrumbscont a:hover
        {
            color: var(--black);
        }
        
    #breadcrumbscont .fa-regular
    {
        font-size: 0.6em;
        padding-left: 7px;
        padding-right: 7px;
        font-weight: 700;
    }
	
#topimgcont
{
    display: block;
    text-align: center;
}

    #topimgcont .imgoverlay
    {
        padding: 8rem 0;
        background: linear-gradient(to bottom, rgba(5,54,34,0.3), rgba(5,54,34,0.7));
    }
	
#boxescont
{
	background: var(--lightgrey);
}

    #boxescont .card-wrapper
    {
        position: relative;
        aspect-ratio: 3 / 2;
        overflow: hidden;
        display: block;
        text-decoration: none !important;
        transition: box-shadow var(--transition-speed) var(--curve);
    }
    
    #boxescont .card-bg
    {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        transition: transform var(--transition-speed) var(--curve);
        z-index: 1;
    }
    
    #boxescont .card-overlay
    {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(7,82,52,0.8) 0%, rgba(7,82,52,0.5) 100%);
        z-index: 2;
        transition: background var(--transition-speed) ease;
    }
    
    #boxescont .card-content
    {
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 3;
        color: var(--white);
        padding: 2rem;
        text-align: center;
    }
    
    #boxescont .content-main
    {
        transition: transform var(--transition-speed) var(--curve);
    }
    
    #boxescont .card-content i
    {
        display: inline-block;
        font-size: 1.5em;
        font-style: normal;
        background: var(--primarycolourlighter);
        color: var(--white);
    }
    
    #boxescont .card-content h3
    {
        font-size: 1.4em;
    }
    
    #boxescont .view-details
    {
        position: absolute;
        bottom: 40px;
        opacity: 0;
        font-weight: 800;
        text-transform: uppercase;
        font-size: 0.7em;
        color: var(--white);
        font-family: var(--fontprimary);
        letter-spacing: 0.2em;
        transform: translateY(20px);
        transition: transform var(--transition-speed) var(--curve), opacity var(--transition-speed) ease;
    }
    
    #boxescont .card-wrapper:hover .card-bg
    {
        transform: scale(1.1);
    }
    
    #boxescont .card-wrapper:hover .card-overlay
    {
        background: linear-gradient(180deg, rgba(16,177,111,0.5) 0%, rgba(7,82,52,0.9) 100%);
    }
    
    #boxescont .card-wrapper:hover .content-main
    {
        transform: translateY(-15px);
    }
    
    #boxescont .card-wrapper:hover .view-details
    {
        opacity: 1;
        transform: translateY(0);
    }

#maincont
{
    text-align: left;
    background: var(--white);
    
    min-height: 500px;
    height: auto !important;
    height: 500px;
}

    .home #maincont .container
    {
        text-align: center;
		width: 100%;
		max-width: 1200px;
        
        padding-top: 30px;
        padding-bottom: 30px;
        
        min-height: 200px;
        height: auto !important;
        height: 200px;
    }
    
        #maincont .fancy-gallery
        {
            
        }
        
            #maincont .fancy-gallery .ratio
            {
                overflow: hidden;
                border-radius: 8px;
                cursor: pointer;
            }
            
            #maincont .fancy-gallery .ratio img
            {
                object-fit: cover;
                transition: transform 0.4s ease;
            }
            
            #maincont .fancy-gallery .ratio:hover img
            {
                transform: scale(1.1);
            }
        
        #maincont .cellbox
        {
            background: var(--lightgrey);
        }

            #maincont .col-lg-border:not(:last-child)
            {
                border-right: 1px solid #DDD;
            }
            
            #maincont .col-lg-border + .col-lg-border
            {
                border-left: 1px solid #DDD;
                margin-left: -1px;
            }

#testimonials-cont
{
	background: var(--primarycolourlight);
	color: var(--white);
	text-align: center;
}

    #testimonials-cont p
    {
    	display: block;
    	width: 100%;
    	max-width: 800px;
    	margin: 0 auto;
    }
    
    	#testimonials-cont .owl-customnav ul
    	{
    		display: inline-block;
    		margin: 0;
    		list-style-type: none;
    	}
    
    		#testimonials-cont .owl-customnav ul li
    		{
    			display: inline-block;
    		}
    		
    			#testimonials-cont .owl-customnav ul li a
    			{
    				color: var(--primarycolourlighter) !important;
                    padding-left: 20px;
                    padding-right: 20px;
    			}
    			
        			#testimonials-cont .owl-customnav ul li a span
        			{
        				font-size: 120%;
        			}
        			
        				#testimonials-cont .owl-customnav ul li a:hover
        				{
        					color: var(--black);
        					cursor: pointer;
        				}
        				
        	    #testimonials-cont .item p
        	    {
        	        display: block;
        	        width: 100%;
        	        max-width: 1000px;
        	        margin: 0 auto;
        	        padding-left: 30px;
        	        padding-right: 30px;
        	    }
        	    
            	    #testimonials-cont .item p.quotep
            	    {
            	        font-family: inherit;
            	        font-size: 130%;
            	        line-height: 1.4em;
            	        font-weight: 600;
            	    }
    
#processcont
{
	background: var(--darkgrey);
	color: var(--white);
	text-align: center;
}

    #processcont p
    {
    	display: block;
    	width: 100%;
    	max-width: 800px;
    	margin: 0 auto;
    }
    
    #processcont ul.nav
    {
        width: auto;
        display: block;
        margin: 0 auto;
    }
    
        #processcont ul.nav li
        {
            width: auto;
            display: inline-block;
        }
        
            #processcont ul.nav li a
            {
                color: var(--primarycolour);
                font-family: var(--fontprimary), Arial, Verdana, Helvetica, sans-serif !important;
                font-weight: 800;
            }
        
            #processcont ul.nav li a.active
            {
                background: var(--primarycolour);
                color: var(--darkgrey);
            }

    #processcont #tabscont
    {
        display: block;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }
    
    #processcont .tab-content
    {
        background: var(--white);
        color: var(--darkgrey);
        text-align: center;
        border-top: 5px solid var(--primarycolour);
        
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

#featurebox
{
	background: #E5E5E5;
	text-align: left;
	line-height: 2em;
	
    min-height: 500px;
    height: auto !important;
    height: 500px;
}

    #featurebox .tablecolumns
    {
        display: flex;
        flex-wrap: wrap;
        height: 100%;
    }
    
        #featurebox .tablecolumns .rowleft
        {
            flex-grow: 1;
            flex-basis: 50%;
            
            background: url("images/home-img.jpg") no-repeat 50% 50%;
            background-size: cover;
        }
        
        #featurebox .tablecolumns .rowright
        {
            flex-grow: 1;
            flex-basis: 50%;
        }
        
        #featurebox .tablecolumns .negmargin
        {
            margin: 50px 0 50px -200px;
            background: var(--white);
        }

#homepageimgbanner
{
	background: var(--white) url("images/bg-calltoaction.jpg") no-repeat 70% 50%;
	background-size: cover;
}

	#homepageimgbanner .overlaybg
	{
        background: linear-gradient(to bottom, rgba(5,54,34,0.4), rgba(5,54,34,1));
	}

	#homepageimgbanner .container-fluid
	{
        padding: 120px 20px 0 20px;
        text-align: center;
	}

    #homepageimgbanner .wave-container
    {
        position: relative;
        bottom: -2px;
    }
    
        #homepageimgbanner .wave-container > svg
        {
            display: block;
        }
	
		#homepageimgbanner h3
		{
			display: block;
			width: 100%;
			font-size: 1.9em;
			max-width: 650px;
			color: var(--white);
		}
		
		#homepageimgbanner p
		{
            display: block;
            width: 100%;
            max-width: 800px;
            color: var(--white);
            margin: 0 auto 30px auto;
            line-height: 1.6em;
            font-weight: 400;
		}
		
			#homepageimgbanner p:last-child
			{
				margin: 0 auto;
			}

#footercont
{
    position: relative;
    margin-top: 0;
	padding-top: 0;
	padding-bottom: 40px;
	color: var(--white);
	color: rgba(255,255,255,0.6);
}

#footercont .container
{
    margin-top: -70px;
}
	
	#footercont h3
	{
		color: var(--white);
		margin: 0 0 15px 0;
	}
	
	#footercont p
	{
		line-height: 1.4em;
	}
	
	#footercont #getbutton
	{
		text-align: right;
	}
	
	#footercont #getbutton p
	{
		margin: 0;
	}
		
		#footertop
		{
		    border-bottom: 1px dotted rgba(255,255,255,0.2);
		    text-align: center;
		}
		
            #footertop ul
            {
                margin-left: 0;
                list-style-type: none;
            }
            
                #footertop ul li
                {
                    display: inline-block;
                    color: var(--white);
                    font-weight: 800;
                    font-size: 1.2em;
                    font-family: var(--fontprimary);
                    letter-spacing: 0.02em;
                }
                
                #footertop ul li:after
                {
                    content: " / ";
                    color: var(--primarycolourlighter);
                    padding: 0 14px;
                    font-weight: 800;
                }
                
                    #footertop ul li:last-child::after
                    {
                        content: "";
                    }
		
		#footermiddle
		{
			
		}

			#footermiddle a
			{
				color: var(--white);
				font-weight: 800;
				text-decoration: none;
			}
			
    			#footermiddle a:hover
    			{
    				color: var(--primarycolourlighter);
    				font-weight: 800;
    				text-decoration: none;
    			}
			
			#footermiddle #contactdets
			{
				text-align: center;
			}
		
			#footermiddle #contactdets p
			{
				line-height: 1.6em;
				font-size: 1em;
				color: var(--white);
				font-weight: 800;
        		text-transform: none;
			}
		
				#footermiddle #contactdets p span
				{
					font-size: 1.3em;
					font-weight: 800;
					letter-spacing: 0em;
					color: var(--white);
					font-family: var(--fontprimary), Arial, Verdana, Helvetica, sans-serif !important;
				}
				
                #footermiddle #contactdets a
                {
                    color: var(--primarycolourlighter);
                    text-decoration: none;
                }
                
                    #footermiddle #contactdets a:hover
                    {
                        color: var(--white);
                    }
				
		#footerbottom
		{
			text-align: center;
			border-top: 1px dotted rgba(255,255,255,0.2);
		}
		
			#footerbottom a
			{
				color: var(--primarycolourlighter);
				text-decoration: none;
			}
			
			#footerbottom a:hover
			{
				color: var(--white);
				text-decoration: underline;
			}
			
				#footerbottom .col-lg-2
				{
					
				}
				
					#footerbottom .col-lg-2 p
					{
						margin: 0;
						font-size: 1.6em;
					}
					
						#footerbottom .col-lg-2 p a
						{
							color: var(--white);
						}
				
				#footerbottom .col-lg-10
				{
					text-align: right;
				}
				
					#footerbottom .col-lg-10 p
					{
						margin: 0;
					}

/* ==================================================
   Media Queries
================================================== */

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

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

    #headercont
    {
        background: var(--primarycolour) url("images/logo-icon-faded.png") no-repeat 50% 30%;
        background-size: clamp(700px, 50%, 800px);
    }
	
    	#headercont #headerleft p a img
    	{
    		margin: 0 auto;
    	}
	
		#headercont #headerright ul li#searchtoggle
		{
			border-left: 0;
		}
		
			#headercont #headerright ul li#searchtoggle span.fa-search
			{
				font-size: 1.4em;
			}
	
		#headercont #headerright ul li a
		{
			display: none;
		}
		
		#headercont #headerright .searchtoggle span
		{
			margin-right: 15px;
		}
	
	#footercont
	{
		text-align: center;
		padding-top: 60px;
		margin-top: -20px;
	}
	
	    #footermiddle .imgfooter
	    {
	        margin: 0 auto;
	    }
	
		#footermiddle #contactdets
		{
			padding-top: 0px;
		}
	
		#footercont #getbutton
		{
			text-align: center;
			margin-top: 20px;
		}
		
		#footerbottom
		{
			text-align: center;
		}
		
			#footerbottom .col-lg-10
			{
				text-align: center;
				margin-top: 10px;
			}
	
}

@media only screen and (max-width: 768px)
{
	
    .anchor
    {
        top: -160px;
    }
   
    #topcont #topleft span
    {
        display: block;
    }
   
    #topcont #topleft span.topmobile
    {
        display: none;
    }
    
    #imagegallery
    {
        
    }

        #imagegallery .gal
        {
            -webkit-column-count: 2;
            -moz-column-count: 2;
            column-count: 2;
        }
        
    #highlightbox
    {
        text-align: center;
    }
    
        #highlightbox .row
        {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }
        
            #highlightbox .row img
            {
                margin-bottom: 30px;
            }
    
	#homepageimgbanner .container-fluid
	{
        padding-bottom: 60px;
	}
    
}

@media only screen and (max-width: 576px)
{
    
    #featurebox .tablecolumns
    {
        margin-left: -10px;
        margin-right: -10px;
    }
    
        #featurebox .tablecolumns .rowleft
        {
            flex-basis: 100%;
            height: 300px;
        }
        
        #featurebox .tablecolumns .rowright
        {
            flex-basis: 100%;
        }
        
        #featurebox .tablecolumns .negmargin
        {
            margin: -80px 15px 0 15px;
            padding: 20px 20px 10px 20px;
            text-align: center;
        }
	
	#homepageimgbanner .container-fluid
	{
        padding-bottom: 80px;
	}
	
}