/*
Theme Name: 4SP Custom Theme
Theme URI: https://4sp.group
Description: A custom template designed solely for 4SP Group (https://4sp.group)
Author: DVH Design
Author URI: https://dvhdesign.co.uk/
Version: 1.0

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/

*/

@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css'); 

/*Font embed Start Google font @import */

@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/*Font embed End */

/* Style Start */

body {  font-size: 16px; }

h1 { font-family: "Nunito", sans-serif;
     font-optical-sizing: auto; 
     font-size: 2.375em; 
     font-weight: 600;
     line-height: 61px;
     color: #000; }
     
h2 { font-family: "Nunito", sans-serif;
     font-optical-sizing: auto; 
     font-size: 2em;
     font-weight: 600;
     color: #000; 
     line-height: 43px; }
     
.svs h2, .git h2 { color: #fff; }

.git h2 { text-align: center; }     

h3 { font-family: "Nunito", sans-serif;
     font-optical-sizing: auto;
     font-size: 1.625em;
     font-weight: 500;
     line-height: 38px; }
     
.sbx h3 { color: #fff; 
          padding-top: 35px;
          padding-bottom: 35px;}     
     
h4 { font-family: "Nunito", sans-serif;
     font-optical-sizing: auto; 
     font-size: 1.375em;
     font-weight: 500; 
     line-height: 33px;  }
     
footer h3 { font-family: "Nunito", sans-serif;
            font-optical-sizing: auto; 
            font-size: 1.375em;
            font-weight: 600; 
            line-height: 33px;
            color: #fff;
            text-transform: uppercase; 
            margin-bottom: 48px;      
            text-align: center; }

a { color: #44AAE1; }

a:hover { color: #F1A800; }

p, li, td { font-family: "Roboto", sans-serif;
            font-optical-sizing: auto;
            font-size: 1em;
            color: #000;
            font-weight: 400;
            line-height: 25px; }
            
.txt2 ul { list-style-type: none; }

.fn p { font-size: 0.83em;
        color: #fff;
        text-align: center; }
      
.blw { color: #1884C6; }

.blb { color: #44AAE1; }

.blab { color: #44AAE1;
		font-weight: 500; }

.glb { color: #F1A800; }

.bx h2 { font-size: 2.25em;
         color: #fff;
         font-weight: 500; }
         
.bx h2:after, #n2-ss-2item7:after, #n2-ss-2item1:after, #n2-ss-2item4:after { padding-top: 15px;
               																  border-bottom: 3px solid #F1A800;
               																  content: '';
               																  display: block;
               																  margin-right: 35%;
               																  width: 22%; }
               
.bx p { font-family: "Roboto", sans-serif;
        font-optical-sizing: auto;
        font-size: 1em;
        font-weight: 400;
        color: #fff;
        line-height: 27px;
        padding-top: 30px;
        }

body.home > .bx p { padding-bottom: 30px !important; }
        
.btn-mor { background-color: #44AAE1;
           border-color: 1px #3B3939 solid;
           border-radius: 6px;
           padding: 16px 28px; 
           color: #fff; 
           font-size: 1em;
           font-weight: 500;
           text-align: center;
           text-transform: uppercase;
           text-decoration: none; }

[type="submit"]:not(:disabled) { background-color: #44AAE1;
           border-color: 1px #3B3939 solid;
           border-radius: 6px;
           padding: 16px 28px; 
           color: #fff; 
           font-size: 1em;
           font-weight: 500;
           text-align: center;
           text-transform: uppercase;
           text-decoration: none; }

[type="submit"](:hover) { background-color: #136A9E;
                 		color: #fff; }
           
.btn-svs { clear: both;
		   background-color: transparent;
           border: 1px #fff solid;
           border-radius: 5px;
           text-align: center;
           color: #fff; 
           font-size: 16px;
           font-weight: 500;
           text-transform: uppercase;
           text-decoration: none; 
           padding: 8px 11px; }

.btn-sv { clear: both;
		   background-color: transparent;
           border: 1px #136A9E solid;
           border-radius: 5px;
           text-align: center;
           color: #136A9E; 
           font-size: 16px;
           font-weight: 500;
           text-transform: uppercase;
           text-decoration: none; 
           padding: 8px 11px; }

.btn-sv:hover { background-color: #136A9E;
                 color: #fff; }
           
.btn-svs:hover { background-color: #000;
                 color: #fff; }
           
.btn-mor:hover { color: #fff;
                 background-color: #F1A800; }
                 
.txt2 li:before { font-family: "Font Awesome 6 Pro";
                  content: "\f00c";
                  font-size: 1em; 
                  color: #1884C6;
                  padding-right: 12px; }
                  
.ts p { font-style: italic; 
        font-family: "Roboto", sans-serif;
        font-optical-sizing: auto;
        font-size: 1em;
        font-weight: 400; }
        
p.nam { font-style: normal !important; }

.fn i { font-size: 3.4375em; } 

.fn a { color: #F1A800; }

.fn a:hover { color: #44AAE1; }    

.bx { border: 1px #fff solid;
      background-color: rgba(59,57,57,0.68);
      /* padding: 33px 24px; */ }
      
.p1 { border-bottom: 5px #136A9E solid;
      padding-bottom: 48px; }

.px, .nt { color: rgba(255,255,255,0.68);
           font-size: 2.5em;  }
           
.tpx, .tnt { color: rgba(0,0,0,0.49);
           font-size: 2.5em;  }
           
.git { padding-top: 105px;
       padding-bottom: 59px;   }
       
.codt img { margin-bottom: 21px;
            margin-left: auto; 
            margin-right: auto; }
            
.codt i { padding-right: 2em; }  

.codt li { color: #fff; 
           line-height: 24px; 
           padding-top: 15px;
           padding-bottom: 15px; }     

.codt i a, .codt i { color: #44AAE1; }

footer a { color: #fff;
           text-decoration: none; }  

footer a:hover, .codt i:hover { color: #F1A800; } 
            
.fa-ul { list-style-type: none;
         margin-left: var(--fa-li-margin,2.5em);
         padding-left: 0; }
         
.fa-li { left: calc(var(--fa-li-width, 2em)*-1);
         position: absolute;
         text-align: center;
         width: var(--fa-li-width,2em);
         line-height: inherit;
         top: 0 !improtant;  }   
         
 .soc i { font-size: 1.625em; }
 
 .fa-facebook-f { padding-right: 1em; }
 
 .fa-instagram { padding-left: 1em;
                 padding-right: 1em; }
 
 .fa-linkedin-in { padding-left: 1em; }
 
 .soc a { color: #fff; }


/* Style End */
         
/* Layers Start */

body.home .tit { padding: 15em 2em 2em 2em; }

body.page .tit { padding: 6.65em 2em 2em 2em; }

header { position: fixed;
		 z-index: 9999;
         width: 100%;
         background-color: rgba(255,255,255,0.8);
         padding-top: 24px;
         padding-bottom: 24px; 
         border-bottom: 1px rgba(0,0,0,0.51) solid;
         z-index:500; }

footer { padding-left: 2em;
		 padding-right: 2em; }

.txt { padding-top: 78px;
       padding-bottom: 43px; }
       
.svs { padding-top: 35px;
       padding-bottom: 35px; }

footer { background-color: #3B3939;
         border-top: 3px #fff solid; }

.sro { padding-top: 35px;
       padding-bottom: 14px; }

.st { margin-top: 157px; }

.svs { background: url(images/4sp-services-bg.webp) repeat-y center center;
       background-size: cover;
       background-position: fixed; }  

.sbx { background-color: rgba(19,106,158,0.83);
       padding: 30px 24px;
       border: 1px #ddd solid; 
       border-radius: 5px;
       text-align: center; }   
        
.txt2, .tst { padding-top: 44px;
              padding-bottom: 44px;  }    
              
.quo { background: #fff url(images/testimonials.webp) no-repeat;
       background-position: right top; }  
                    
.ts { margin-top: 35px;
      margin-bottom: 35px; }  
      
.codt, .olx, .soc { padding-top: 35px;
                    padding-bottom: 35px;  }
                    
.soc { text-align: center; }                                        

/* Layers End */

/* Everything Forms Start */

.wpcf7-response-output { color: #fff; }

.fm { padding-top: 18px;
      padding-bottom: 18px; }

.form-label { color: #fff;
              font-family: "Roboto", sans-serif;
              font-style: italic;
              font-size: 1em;
              font-weight: 400; }

.quo-label { color: #000;
              font-family: "Roboto", sans-serif;
              font-style: italic;
              font-size: 1em;
              font-weight: 400; }
              
.form-control { background-color: transparent;
                border-width: 0 0 1px 0;
                border-radius: 0;
                border-color: #fff; }

 .blk { border-color: #000 !important; }

.btn-send, .wpcf7-submit { padding: 13px 49px;
            				background-color: #F1A800; 
            				font-family: "Nunito", sans-serif;
            				font-optical-sizing: auto; 
            				font-size: 1em; 
            				font-weight: 600;
            				text-transform: uppercase; 
            				color: #fff;  }
            
.btn-send:hover, .wpcf7-submit:hover { background-color: #000; }

body.page-id-1604 .wpcf7-response-output { color: #000 !important; }
            
/* Everything Forms End */

/* Nav styling start */

.active, .current_page_item { }

.navbar { background-color: transparent; }

button.navbar-toggler { background-color: transparent;
                        border-radius: 0;
                        padding: 0.6em;
                        border: 0px #fff solid;
                        font-size: 2.8125em;
                        color: #000; }

button.navbar-toggler:hover { color: #F1A800; }     

button.navbar-toggler:focus { color: #000; }

.navbar-expand-lg .navbar-nav .menu-item { margin-top: 10px;
                                           margin-bottom: 10px; }    
                                                  
                        
.navbar-expand-lg .navbar-nav .menu-item a { font-family: "Roboto", sans-serif;
                                            font-optical-sizing: auto;
                                            font-size: 1.125em;
                                            color: #000;
                                            font-weight: 400;
                                            text-transform: uppercase; 
                                            padding-top: 15px;
                                            padding-bottom: 15px; }
                                            

                                            
.navbar-expand-lg .navbar-nav .menu-item:last-child, .navbar-expand-lg .navbar-nav .menu-item:last-child a { background-color: #44AAE1;
                                                                                                             color: #fff !important; }
                                                                                                             
.navbar-expand-lg .navbar-nav .menu-item:last-child a:hover, .navbar-expand-lg .navbar-nav .menu-item:last-child:hover { background-color: #1884C6;
                                                                                                                         color: #fff !important;  }                                                                                                            
                                            
.navbar-expand-lg .navbar-nav .dropdown-item a { font-size: 1em; }

#navbarSupportedContent { padding-top: 34px; }

#navbarSupportedContent .navbar-expand-lg .navbar-nav .menu-item a:focus, .navbar-expand-lg .navbar-nav .menu-item:hover, .navbar-nav .menu-item:focus, .navbar-expand-lg .navbar-nav .menu-item a:hover { background-color: #ddd;
                                                                                                                                                                                                           color: #1884C6 !important; }                          
.navbar-expand-lg .active > .menu-item a, .navbar-nav .current_page_item > .menu-item a, .navbar-nav .menu-item a:focus, .navbar-nav .menu-item a:hover, a.dropdown-item:hover { text-decoration: none; }

.navbar-expand-lg .navbar-nav .menu-item:hover {  }
                             
.navbar-nav ul { list-style-type: none; }

/* Nav styling end */

/* Navigation to get Bootstrap working Start */

.navbar-toggler:focus { box-shadow: 0 0 0 0; }

.navbar-light .navbar-nav .active > .menu-item a, .navbar-light .navbar-nav a.current_page_item, .navbar-light .navbar-nav a.show, .navbar-light .navbar-nav .show > .menu-item a {
    color: rgba(0,0,0,.9);
}

.navbar-expand-lg .navbar-nav .menu-item a {
    padding-right: .5rem;
    padding-left: .5rem;
}
.navbar-nav .menu-item a {
     padding-left: 1rem;
     padding-right: 1rem;
    text-decoration: none;
    text-align: left;
}

.menu-item a {
    display: block;
    padding: .5rem 1rem;
        padding-right: 1rem;
        padding-left: 1rem; }

.nav .menu-item { padding-top: 15px;
                  padding-bottom: 15px; } 

.navbar { z-index: 500; }

.fa-ul > li { z-index: 1; }

/* Navigation to get Bootstrap Working End */

/* Stuff that WordPress might want to use Start */

p.comment-form-comment label { vertical-align: top; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

/**
 * 8.0 - Alignments
 */

.alignleft {
	float: left;
	margin: 0.375em 1.75em 1.75em 0;
}

.alignright {
	float: right;
	margin: 0.375em 0 1.75em 1.75em;
}

.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto 1.75em;
}

blockquote.alignleft {
	margin: 0.3157894737em 1.4736842105em 1.473684211em 0;
}

blockquote.alignright {
	margin: 0.3157894737em 0 1.473684211em 1.4736842105em;
}

blockquote.aligncenter {
	margin-bottom: 1.473684211em;
}


/**
 * 9.0 - Clearings
 */

.clear:before,
.clear:after,
blockquote:before,
blockquote:after,
.entry-content:before,
.entry-content:after,
.entry-summary:before,
.entry-summary:after,
.comment-content:before,
.comment-content:after,
.site-content:before,
.site-content:after,
.site-main > article:before,
.site-main > article:after,
.primary-menu:before,
.primary-menu:after,
.social-links-menu:before,
.social-links-menu:after,
.textwidget:before,
.textwidget:after,
.content-bottom-widgets:before,
.content-bottom-widgets:after {
	content: "";
	display: table;
}

.clear:after,
blockquote:after,
.entry-content:after,
.entry-summary:after,
.comment-content:after,
.site-content:after,
.site-main > article:after,
.primary-menu:after,
.social-links-menu:after,
.textwidget:after,
.content-bottom-widgets:after {
	clear: both;
}

.navbar-brand {  }


/* Stuff that WordPress might want to use End */ 

/* Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) { 

 }

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 


 }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	
body.page .tit { padding: 5em 2em 2em 2em !important; }
	
body.single .tit { padding: 7.6em 2em 2em 2em !important; }

.btn-mor { padding: 20px 29px; }

.fn p { text-align: right; }

.sare { background: url(https://staging.4sp.group/wp-content/uploads/2025/06/home-cover-dtop.webp) no-repeat center center;
        background-size: cover; }
         
#navbarSupportedContent { border: 0; 
                          padding-top: 0px;
                          padding-bottom: 0px;}

.navbar-expand-lg .navbar-nav .menu-item a { padding-left: 1.75em;
                                             padding-right: 1.75em;
                                             padding-top: 23px;
                                             padding-bottom: 23px;  }

header { padding-top: 10px;
         padding-bottom: 10px; }

h1 { font-size: 2.8125em; }

h2 { font-size: 2.375em;
     line-height: 48px; }

.svs { padding-top: 41px;
       padding-bottom: 41px; }
       
.txt2, .tst { padding-top: 41px;
              padding-bottom: 41px;  }  
              
footer h3, .soc { text-align: left; }    

 }

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {



 }