/*
	Theme Name: Pektron Group 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;
}

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(--bodyfont) !important;
    font-size: clamp(1rem, 0.8269rem + 0.4808vw, 1.125rem);
    font-weight: 400;
    line-height: 2em;
    color: var(--white);
    background: var(--pektronblue);
    
    text-rendering: optimizeLegibility;
    vertical-align: baseline;
}

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

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

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

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

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

/* Force all YouTube videos in SiteOrigin blocks to be fully responsive */
.so-panel iframe[src*="youtube.com"],
.so-panel iframe[src*="youtu.be"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-width: 100% !important;
    display: block;
}

/* ==================================================
   Background Colours
================================================== */

.bg-white
{
    background: var(--white);
}

.bg-lightgrey
{
    background: var(--lightergrey);
}

.bg-greypattern
{
    background: var(--lightergrey);
    background-image:
        linear-gradient(to top, rgba(238,238,238,0) 0%, rgba(238,238,238,1) 100%),
        linear-gradient(to left, rgba(238,238,238,0) 0%, rgba(238,238,238,1) 100%),
        url('images/squares-transparent-grey.png');
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: auto 1000px;
}

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

#topcont
{
    color: var(--white);
    
    -webkit-transition: background 0.1s ease-in-out;
    -moz-transition:    background 0.1s ease-in-out;
    -o-transition:      background 0.1s ease-in-out;
    -ms-transition:     background 0.1s ease-in-out;
    transition:         background 0.1s ease-in-out;
}

    #topcont .box.box-top span
    {
        margin-bottom: 0;
    }
	
        #topcont .box.box-top #topleft
        {
            color: var(--white);
        }
        
            #topcont .box.box-top #topleft span
            {
                font-size: 0.9em;
                letter-spacing: 0.01em;
                font-weight: 400;
            }
            
                #topcont .box.box-top #topleft span img
                {
                    display: inline-block;
                    max-width: 24px;
                    margin-right: 8px;
                    margin-bottom: -3px;
                }
      
            #topcont .box.box-top #topleft span a
            {
                color: var(--white);
                font-weight: 700;
                text-decoration: underline;
                
                text-decoration-color: rgba(255,255,255,0.6);
                text-underline-offset: 7px;
                text-decoration-thickness: 1.4px;
            }
         
                #topcont .box.box-top #topleft span a:hover
                {
                    text-decoration-color: var(--white);
                    
                    text-decoration-color: rgba(255,255,255,1);
                    text-underline-offset: 7px;
                    text-decoration-thickness: 1.4px;
                }
                
                    #topcont .box.box-top #topleft span
                    {
                        
                    }
                   
                        #topcont .box.box-top #topleft span:first-child
                        {
                            margin-right: 18px;
                        }
		
		#topcont .box.box-top #topright
		{
			
		}
		
			#topcont .box.box-top #topright ul
			{
				float: right;
				list-style-type: none;
				margin: 0;
			}
			
				#topcont .box.box-top #topright ul li
				{
					float: left;
				}
				
					#topcont .box.box-top #topright ul li a
					{
						color: var(--white);
					}

						#topcont .box.box-top #topright ul li a span
						{
                            float: left;
                            font-size: 1.3em;
                            line-height: 24px;
                            margin-left: 12px;
						}
        
#logomenucont
{
    background: rgba(255,255,255,1);
    box-shadow: none;
    
    -webkit-transition: box-shadow 0.2s;
    -o-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
}

    #logomenucont.is-stuck
    {
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15) !important;
    }
    
        #logomenucont .box.box-1 img
        {
            max-height: 75px;
        }

#gallerycont
{
    position: relative;
    height: none;
    min-height: none;
    height: 75vh;
    min-height: 500px;
    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 .overlaybg
    {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
        #gallerycont #middlebox
        {
            background: rgba(0,0,0,0.2);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }

    #gallerycont .container
    {
        position: relative;
        z-index: 2;
    }

#gallerycont .box.box-2
{
    display: flex;
    align-items: center;
}

    #gallerycont .box.box-2 #middlebox
    {
        color: var(--white);
        text-align: left;
    }
    
        #gallerycont .box.box-2 #middlebox h2
        {
            font-size: 2em;
            line-height: 1em;
        }
        
            #gallerycont .box.box-2 #middlebox h2,
            #gallerycont .box.box-2 #middlebox p
            {
                text-shadow: 2px 2px 6px rgba(0,0,0,0.5);
            }
        
                #gallerycont .box.box-2 #middlebox h2 span.featured
                {
                    position: relative;
                    display: inline-block;
                }
                
                    #gallerycont .box.box-2 #middlebox h2 span.featured::before
                    {
                        content: '';
                        position: absolute;
                        top: 5%;
                        left: -7px;
                        width: 100%;
                        width: calc(100% + 12px);
                        height: 80%;
                        background-color: var(--pektronblue);
                        rotate: -5deg;
                        
                        -webkit-border-radius: 3px;
                        -moz-border-radius: 3px;
                        border-radius: 3px;
                    }
                
                        #gallerycont .box.box-2 #middlebox h2 span.featured span
                        {
                            position: relative;
                        }
                    
#gallerycont span#scrollButton
{
    display: block;
    position: absolute;
    color: var(--white);
    font-size: 2em;
    cursor: pointer;
    bottom: 40px;
    left: 50%;
    width: 30px;
    margin-left: -15px;
    
    -webkit-animation: bounceArrow 1.4s infinite ease-in-out;
    -o-animation: bounceArrow 1.4s infinite ease-in-out;
    -ms-animation: bounceArrow 1.4s infinite ease-in-out; 
    -moz-animation: bounceArrow 1.4s infinite ease-in-out; 
    animation: bounceArrow 1.4s infinite ease-in-out;
}

@-webkit-keyframes bounceArrow
{
    0% { transform: translateY(-5px)  }
    50% { transform: translateY(10px) }
    100% { transform: translateY(-5px) }
}

@keyframes bounceArrow
{
    0% { transform: translateY(-5px)  }
    50% { transform: translateY(10px) }
    100% { transform: translateY(-5px) }
}

#breadcrumbscont
{
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 0.8em;
	letter-spacing: 0em;
	color: rgba(0,0,0,0.7);
	font-weight: 600;
	font-family: inherit;
	
    background: var(--lightgrey);
    background-image:
        linear-gradient(to top, rgba(238,238,238,0) 0%, rgba(238,238,238,1) 100%),
        linear-gradient(to left, rgba(238,238,238,0) 0%, rgba(238,238,238,1) 100%),
        url('images/squares-transparent-grey.png');
    background-repeat: no-repeat;
    background-position: 100% 50%;
    background-size: auto 1000px;
}

    #breadcrumbscont a
    {
    	color: var(--pektronblue);
    	text-decoration: none;
    }
    
        #breadcrumbscont a:hover
        {
            color: var(--dark);
            text-decoration: none;
        }
        
    #breadcrumbscont .fa-solid
    {
        font-size: 0.7em;
        padding-left: 10px;
        padding-right: 10px;
        color: rgba(0,0,0,0.4);
    }
	
#topimgcont
{
    display: block;
    text-align: center;
}
    
    #topimgcont .imgoverlay
    {
        padding: 10rem 0;
    }
    
        #topimgcont .imgoverlay p
        {
            color: var(--white);
            max-width: 700px;
            font-weight: 900;
            font-size: 120%;
            line-height: 1.2em;
            font-family: var(--fontprimary);
        }

#maincont
{
    text-align: left;
    background: var(--white);
    font-family: inherit;
    color: var(--darkgrey);
    
    min-height: 400px;
    height: auto !important;
    height: 400px;
}

#maincont a
{
    text-decoration: underline;
}

	#maincont a:hover
	{
		text-decoration: none;
	}

.maincont
{
    color: var(--darkgrey);
}
    
    .home #maincont .container
    {
        text-align: left;
        
        padding-top: 30px;
        padding-bottom: 30px;
        
        min-height: 200px;
        height: auto !important;
        height: 200px;
    }
    
        #maincont #homestats .statsdiv
        {
            border-left: 5px solid var(--pektronblue);
            font-family: var(--headingfont);
        }
        
        #maincont .cellbox
        {
            background: var(--lightergrey);
            background-image:
                linear-gradient(to top, rgba(245,245,245,0) 0%, rgba(245,245,245,1) 100%),
                linear-gradient(to left, rgba(245,245,245,0) 0%, rgba(245,245,245,1) 100%),
                url('images/squares-transparent-grey.png');
            background-repeat: no-repeat;
            background-position: 100% 50%;
            background-size: auto 1000px;
        }

            #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;
            }
            
        #maincont .sectorbox
        {
            border-left: 5px solid var(--pektronblue);
        }
        
            #maincont .sectorbox p:last-child
            {
                margin: 0;
            }
            
        #maincont .full-width-wrapper
        {
            width: 100vw;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
            
            background: var(--lightergrey);
            background-image:
                linear-gradient(to top, rgba(245,245,245,0) 0%, rgba(245,245,245,1) 100%),
                linear-gradient(to left, rgba(245,245,245,0) 0%, rgba(245,245,245,1) 100%),
                url('images/squares-transparent-grey.png');
            background-repeat: no-repeat;
            background-position: 100% 50%;
            background-size: auto 1000px;
        }
            
        #maincont .sectortestimonial
        {
            background: var(--lightergrey);
            background-image:
                linear-gradient(to top, rgba(245,245,245,0) 0%, rgba(245,245,245,1) 100%),
                linear-gradient(to left, rgba(245,245,245,0) 0%, rgba(245,245,245,1) 100%),
                url('images/squares-transparent-grey.png');
            background-repeat: no-repeat;
            background-position: 100% 50%;
            background-size: auto 1000px;
            
            border-left: 5px solid var(--pektronblue);
        }
            
        #maincont .careerbox
        {
            background: var(--lightergrey);
            color: var(--darkgrey);
            border-top: 5px solid var(--pektronblue);
        }
        
            #maincont .careerbox .detailsbox
            {
                background: var(--pektronblue);
                font-weight: 700;
                color: var(--white);
                font-family: var(--fontprimary), Arial, Verdana, Helvetica, sans-serif !important;
            }
            
                #maincont .careerbox .detailsbox span
                {
                    display: block;
                    font-size: 120%;
                }

    .topborder
    {
        border-top: 5px solid var(--pektronblue);
    }

#hoverboxescont
{
    display: flex;
    height: 350px;
    border-top: 5px solid var(--white);
}

    #hoverboxescont .hoverboxsection
    {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        color: var(--white);
        transition: flex 0.4s ease;
        position: relative;
        text-align: center;
    }
    
        #hoverboxescont .hoverboxsection .overlay
        {
            background-color: rgba(0,165,203,0.9);
            width: 100%;
            height: 100%;
            position: absolute;
            transition: background-color 0.4s ease;
        }
        
            #hoverboxescont .hoverboxsection:hover .overlay
            {
                background-color: rgba(0,165,203,0.6);
            }
            
    #hoverboxescont .box1
    {
        border-right: 2.5px solid var(--white);
    }
    
    #hoverboxescont .box2
    {
        border-left: 2.5px solid var(--white);
    }

    #hoverboxescont .hoverboxsection .content
    {
        z-index: 2;
    }

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

    #hoverboxescont
    {
        display: block;
        height: auto;
    }
    
        #hoverboxescont .hoverboxsection .content p
        {
            display: block;
        }
	
}

.sec-features
{
    background-image:
        linear-gradient(to top, rgba(0,165,203, 0) 0%, rgba(0,165,203, 1) 100%),
        linear-gradient(to left, rgba(0,165,203, 0) 0%, rgba(0,165,203, 1) 100%),
        url('images/squares-transparent.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 1000px;
}

    .sec-features a
    {
        color: var(--white);
        display: block;
    }

    .sec-features .feature span
    {
        font-size: 2.2em;
        position: relative;
    }
    
    .sec-features .iconbox
    {
        min-width: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }
    
    .sec-features .contbox
    {
        border-left: 5px solid rgba(255,255,255,0.5);
        height: 100%;
    }
    
        .sec-features a:hover .contbox
        {
            border-left: 5px solid rgba(255,255,255,0.7);
            height: 100%;
        }
    
#logocont
{
    background: var(--white);
    color: var(--darkgrey);
}

    #logocont .logocaro
    {
        display: grid;
        align-items: center;
        justify-items: center;
        width: 60%;
        height: auto;
        transition: transform 0.5s ease-in;
        margin: 8px auto;
    }
    
        #logocont .logocaro img
        {
            max-width: 100%;
            max-height: 100%;
            width: 100%;
        }
        
        #logocont .logocaro:hover
        {
            transform: scale(1);
        }
    
.sec-careers
{
    background: var(--lightgrey);
    color: var(--darkgrey);
}

    .sec-careers a img
    {
        transition: 0.3s;
    }
    
    .sec-careers a:hover img
    {
        transform: scale(1.1);
    }
    
    .sec-careers p.careerdeets, .careersboxes p.careerdeets
    {
        position: relative;
        text-transform: none;
        font-weight: 700 !important;
        font-size: 1.05em;
    }
    
        .sec-careers p.careerdeets span, .careersboxes p.careerdeets span
        {
            width: 20px;
            vertical-align: middle;
            color: var(--pektronblue);
        }
    
.sec-news
{
    background: var(--lightgrey);
    color: var(--darkgrey);
}

    .sec-news a img
    {
        transition: 0.3s;
    }
    
    .sec-news a:hover img
    {
        transform: scale(1.1);
    }
    
    .sec-news .lndate
    {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        color: var(--pektronblue) !important;
        text-align: center;
        background: var(--white);
        line-height: 1.2em;
        text-transform: uppercase;
        font-family: var(--headingfont);
        font-weight: 600 !important;
    }
    
        .sec-news .lndate i
        {
            display: block;
            font-size: 1.7em;
            font-style: normal;
        }

#bottomboxescont
{
    background: var(--white);
    color: var(--darkgrey);
}
    
@media only screen and (max-width: 768px)
{
  
    #bottomboxescont .row.position-relative.h-100
    {
        height: auto !important;
    }
    
    #bottomboxescont .box1,
    #bottomboxescont .box2
    {
        height: 240px !important;
        margin-bottom: 20px;
    }
  
}

/** Footer **/

#bottombg
{
    background-image:
        linear-gradient(to top, rgba(0,165,203, 0) 0%, rgba(0,165,203, 1) 100%),
        linear-gradient(to left, rgba(0,165,203, 0) 0%, rgba(0,165,203, 1) 100%),
        url('images/squares-transparent.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto 1000px;
}

#footercont
{
    color: var(--white);
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
    
    #footercont a
    {
        color: var(--white);
        text-decoration: underline;
    }
    
    #footercont ul
    {
        
    }
    
        #footercont ul li
        {
            padding-top: 4px;
            padding-bottom: 4px;
        }
        
            #footercont a
            {
                text-decoration: underline;
                font-weight: 700;
                
                text-decoration-color: rgba(255,255,255,0.6);
                text-underline-offset: 7px;
                text-decoration-thickness: 1.4px;
            }
            
                #footercont a:hover
                {
                    text-decoration: underline;
                    
                    text-decoration-color: rgba(255,255,255,1);
                    text-underline-offset: 7px;
                    text-decoration-thickness: 1.4px;
                }
    
                #footercont .contbox li
                {
                    position: relative;
                    padding-left: 26px;
                    text-transform: none;
                }
            
                    #footercont .contbox li span
                    {
                        position: absolute;
                        left: 0;
                        top: 11px;
                        font-size: 0.8em !important;
                    }

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

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

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

    #hoverboxescont .box1
    {
        border: 0;
        border-bottom: 5px solid var(--white);
    }
    
    #hoverboxescont .box2
    {
        border: 0;
    }
    
    #hoverboxesfootercont .box1
    {
        border: 0;
        border-bottom: 5px solid var(--white);
    }
    
    #hoverboxesfootercont .box2
    {
        border: 0;
    }
    
    #footercont .contbox li
    {
        padding-left: 0;
    }

        #footercont .contbox li span
        {
            display: none;
        }
	
}

@media only screen and (max-width: 768px)
{
	
    .displaynonesm
    {
        display: none;
    }
    
    #gallerycont
    {
        height: 85vh;
        min-height: 550px;
    }
    
    #gallerycont .box.box-2 #middlebox h2
    {
        font-size: 1.7em;
    }
    
}

@media only screen and (max-width: 576px)
{
    
    #topcont .box.box-1 img
    {
        max-height: 60px;
    }
	
}