@charset "UTF-8";
/***** Sacred Executive Protection - Desktop ***/
/* Author: 9o9Designs
/* Version: 1.0
/* Release Date: April 21, 2025
/*************************************/

@media only screen and (min-width:1025px){
	.hideondesktop{
        display: none;
    }
	html{
	    width:100vw;
	    margin:0;
	    padding:0;
	    overflow-x:hidden;
	}
	body{
	    width:100%;
	    margin:0;
	    padding:0;
	    background:#fff;
	    font-family: "Montserrat", sans-serif;
	    font-weight: 400;
        font-style: normal;
	}
	
	/*** FRAME ***/
	main{
	    width:100%;
	    margin-bottom:0px !important;
	}
	.main-container{
	    display:flex;
	    flex-wrap:wrap;
	    flex-direction:row;
	    flex-flow:row wrap;
	    justify-content: flex-start;
	    gap:0px;
	    width:100%;
	}
	header{
	    width:100%;
	    height:100px;
	    background: #0e0f0f;
        position: fixed;
        z-index: 999;
	}
	.logo-container{
	    width:20%;
	    height:100px;
	    float:left;
	}
	.navigation-container{
	    width:80%;
	    height:100%;
	    float:left;
	    padding-right:50px;
	}
	#headerlogo img{
		width:85px;
	    height:85px;
	    margin-top:5px;
	}
	nav{
	    text-align:right;
	    font-family: "Anta", sans-serif;
        font-size:14px;
        font-style: normal;
        text-transform: uppercase;
        color:fff;
        margin-top:15px;
        width:100%;
        float:right;
	}
	nav li{
	    display:inline;
	    padding: 10px 15px;  
	}
    nav li:last-child {
	    text-align:left;
	}
	nav li a{
	    color:#fff;
	    text-decoration: none;
	}
	nav li a{
	    color:#fff;
	    text-decoration: none;
	}
	.phone img{
	    width:24px;
	    height:24px;
	}
	section{
	    width:100%;
	    height:500px;
	}
	.section-aside{
	    width:55%;
	    margin-top:20px
	}
	.section-content{
	    width:45%;
	    height:550px;
	    background: #fff;
	    margin-top:20px;
	}
	.section-content p{
	    width:80%;
	    margin-left:auto;
	    margin-right:auto;
	}
    .section-content ul{
	    width:80%;
	    margin-left:auto;
	    margin-right:auto;
	    list-style-image: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/goldbullet.webp');
	}
	.section-content ul li{
	    padding-top:8px;
	    padding-bottom:8px;
	}
	footer{
	    width:100%;
	    height:385px;
	    background: #0e0f0f;
	    color:#fff;
	}
	footer img{
	    width:24px;
	    height:24px;
	}
	footer a{
		font-size:.9em;
	    text-decoration:none;
	    color:#fff;
	}
	footer a:hover{
		text-decoration:none;
	    color:#fff;
	}
	#footerlogo{
	    text-align:center;
	    margin-top:20px;
	    margin-bottom:20px;
	}
	#footerlogo img{
		width:124px;
	    height:122px;
	}
	.footercontact{
	    margin-top:20px;
	    margin-bottom:20px;
	    text-align:center;
	}
	#copyright{
	    width:100%;
	    height:40px;
	    text-align:center;
	    font-size:.9em;
	    background: #d7b551;
	    padding-top:10px;
	    padding-bottom:10px;
	    margin-top:10px;
	    margin-bottom:10px;
	    color:#000;
	}
	#copyright a{
	    color:#000;
	}
	#copyright a:hover{
	    color:#555;
	}
	
	/*** FRAME ATTRIBUTES ***/
	#msg{
        width:100%;
        height:32px;
        padding-top:10px;
        padding-bottom:10px;
        color:green;
        text-align:center;
        font-size:.9em;
        background:#0f0f0f;
    }
	.note{
	    font-size:.9em;
	}
	.nine{
	    font-family:Oxygen, "sans-serif";
	}
	.hero{
	width:100%;
	    height:675px;
	    background:url('/assets/images/ssbg.webp') no-repeat 0px 0px / 100% 100%;
	}
    .hero #logo{
	    width:200px;
	    height:220px;
	    background:url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/sacredEP-h1-gold.webp') no-repeat 0px 20px / 200px 200px;
	}
	.clients{
	    background: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/colorlogo.webp') no-repeat 22.5% 150px / 200px 187px, #fff;
	    margin-top:30px;
	}
	#clienticons{
	    margin-top:40px;
	    margin-bottom:40px;
	}
	#clienticons img{
	    margin-left: 40px;
	    margin-right: 40px;
	}
	h2{
	    text-align:center;
	    font-family: "Anta", sans-serif;
        font-weight: 400;
        font-style: normal;
        text-transform: uppercase;
        margin-top:40px;
        margin-bottom:20px;
	}
	h2 span{
        background-image: linear-gradient(80deg, #c89c0c,#d7b551 100%);
        background-repeat: no-repeat; 
        background-size: 100% 0.2em; 
        background-position: 0 100%;
	}
	h2 img{
	    height:32px;
	    width:75px;
	}
	/*** stats section ***/
	.stats{
	    background: #0f0f0f;
	    text-align:center;
	    color: #fff;
	    height:475px;
	}
    .stats h2{
	   color: #fff;
	   margin-top:40px;
	}
	.statbox{
	    width:175px;
	    height:175px;
	    background: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/goldencircle.webp') no-repeat 0% 0% / 175px 175px;
        float:left;
	    margin-left:48px;
	    margin-top: 25px;
	}
	.statlabel{
	    width:175px;
	    height:20px;
	    text-align:center;
	    font-size: 12px;
	    margin-top:50px;
	}
	.statnum{
	    width:175px;
	    height: 75px;
	    text-align:center;
	    font-family: "Anta", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size:2.2em;
	}
	/*** execitive, transport & about sections ***/
	
	.executive h2{
	    width:80%;
	    margin-left:auto;
	    margin-right:auto;
	    text-align:left;
	}
	.executiveimg{
	    background: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/executive.webp') no-repeat 100% 0% / 730px 500px,
	                url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/goldrectangle.webp') no-repeat 50% 70% / 737px 491px;           
	}
	.transport{
		background: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/colorlogo.webp') no-repeat 50% 105px / 200px 187px, #fff;
	}
	.transport h2{
	    width:80%;
	    margin-left:auto;
	    margin-right:auto;
	    text-align:left;
	}
	.transportimg{
	    background: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/chauffer.webp') no-repeat 0% 0% / 730px 500px,
	                url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/goldrectangle.webp') no-repeat 50% 70% / 737px 491px; 
	}
	
	/*** about section ***/
	.about{
	    background: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/colorlogo.webp') no-repeat 50% 105px / 200px 187px, #fff;
	}
	.about h2{
	    width:80%;
	    margin-left:auto;
	    margin-right:auto;
	    text-align:left;
	}
	.aboutimg{
	    background: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/team.webp') no-repeat 100% 0% / 730px 500px,
	                url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/goldrectangle.webp') no-repeat 50% 70% / 737px 491px;
	}
	/*** email section  ***/
	.email{
	    height: 325px;
	    background: #0f0f0f;
	    color:#fff;
	}
	.email h2{
	    color:#fff;
	}
	/*** areas section ***/
	.areas{
	    height:845px;
	    background: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/areasoverlay.webp') no-repeat 0% 0% / 100% 845px,
	                url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/areasbg.webp') no-repeat 0% 0% / 100% 845px;
	}
	.areas h4{
	    width:90%;
	    font-size: 1em;
	    background: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/goldmetallic.webp') no-repeat 0px 0px / 95% 65px;
	    margin-left:auto;
	    margin-right:auto;
	    text-transform:uppercase;
	    text-align:center;
	    padding-top:15px;
	    padding-bottom:10px;
	    margin-top:30px;
	}
	.areas ul{
        columns: 2;
	    -webkit-columns: 2;
        -moz-columns: 2;
	}
	.areas ul li{
	    list-style-type: none;
	    font-weight:500;
	}
	.areas li span{
	    font-size:.7em;
	    font-style: italic;
	}
	
	#accessibility{
	    text-align:center;
	    font-size:.8em;
	    margin-bottom:30px;
	    margin-top:20px;
	}
    .btnbox{
	    width:250px;
	    height:50px;
	    margin-left:auto;
	    margin-right:auto;
    }
   .btnblack{
       width: 250px;
       height: 45px;
       padding-top: 10px;
       padding-bottom: 10px;
       text-align: center;
       background: #000;
       color: #fff;
       border:1px solid #000;
   }
   .btnblack:a{
       color: #fff;
       text-decoration:none;
   }
   .btnblack:hover{
       color: #d7b551;
       background-color: rgba(0, 0, 0, 0.95);
   }
   .btnblack :hover{
       color: #d7b551;
       background-color: rgba(0, 0, 0, 0.95);
   }
   .btngold{
       width: 250px;
       height: 45px;
       padding-top: 10px;
       padding-bottom: 10px;
       text-align: center;
       color: #000;
       cursor: pointer;
       background: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/goldmetallic.webp') no-repeat 0px 0px / 250px 45px;
       border:1px solid #000;
       margin-top:30px;
   }
   .btngold :hover{
          color: #fff;
       background: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/goldmetallic.webp') no-repeat 0px 0px / 250px 45px;
       opacity: 0.9;
   }
   .btngold:hover{
       color: #fff;
       background: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/goldmetallic.webp') no-repeat 0px 0px / 250px 45px;
       opacity: 0.9;
   }
   /*** stats parallax ***/
   .parallax{
       background-image: url("https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/blackbg.webp");
       min-height: 475px;
       background-attachment: fixed;
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
   }
    /*** email parallax ***/
    .parallax1{
        background-image: url("https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/blackbg.webp");
        min-height: 325px;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
     }
   
   /*** slider css ***/
    /* Slider */
    .slick-slide {
        margin: 0px 20px;
    }

    .slick-slide img {
        width: 100%;
    }

    .slick-slider
    {
        position: relative;
        display: block;
        box-sizing: border-box;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
    }
    .slick-list
    {
        position: relative;
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    .slick-list:focus
    {
        outline: none;
    }
    .slick-list.dragging
    {
        cursor: pointer;
        cursor: hand;
    }
    .slick-slider .slick-track,
    .slick-slider .slick-list
    {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    }
    .slick-track
    {
        position: relative;
        top: 0;
        left: 0;
        display: block;
    }
    .slick-track:before,
    .slick-track:after
    {
        display: table;
        content: '';
    }
    .slick-track:after
    {
        clear: both;
    }
    .slick-loading .slick-track
    {
        visibility: hidden;
    }
    .slick-slide
    {
        display: none;
        float: left;
        height: 100%;
        min-height: 1px;
    }
    [dir='rtl'] .slick-slide
    {
        float: right;
    }
    .slick-slide img
    {
        display: block;
    }
    .slick-slide.slick-loading img
    {
        display: none;
    }
    .slick-slide.dragging img
    {
        pointer-events: none;
    }
    .slick-initialized .slick-slide
    {
        display: block;
    }
    .slick-loading .slick-slide
    {
        visibility: hidden;
    }
    .slick-vertical .slick-slide
    {
        display: block;
        height: auto;
        border: 1px solid transparent;
    }
    .slick-arrow.slick-hidden {
        display: none;
    }
   
/*** popout menu ***/
    .topnav {
        display: none;
        overflow: hidden;
        background-color: #fff;
        position: relative;
        z-index:999;
        position:fixed;
        top:100px;
        width:400px;
        height:60%;
        right:0px;
        background: #0f0f0f;
        padding-right:40px;
        box-shadow: 3px 3px #d7b551;;
    }
    .topnav .logo img{
        margin-top:10px;
        margin-bottom:10px;
        width:75px;
        height:75px;
        margin-left:40px;
    }
    .topnav ul li img{
        width:24px;
        height:24px;
    }
    .topnav .contactbox{
        font-size:.8em;
        margin-left:40px;
        margin-top:40px;
    }
    .topnav .contactbox img{
        width:24px;
        height:24px;
    }
    .topnav ul{
        list-style: none
    }
    #navilinks ul{
        display:inline;
        list-style: none
    }
    #navlinks li{
        list-style-type: none;
        padding-bottom:10px;
        padding-top:10px;
        background-image: linear-gradient(80deg, #c89c0c,#d7b551 100%);
        background-repeat: no-repeat; 
        background-size: 100% 0.1em; 
        background-position: 0 100%;
    }
    #navlinks a{
        color:#fff;
        text-decoration:none;
        font-size:1.1em;
    }
    #navlinks a:hover{
        color:#d7b551;
    }
    .topnav span{
        text-transform:lowercase;
    }
    .topnav #navlinks {
        display: none;
    }
   
/*** popup form ***/

/* Button used to open the contact form - fixed at the bottom of the page */
    form h1{
	    height:46px;
        font-family: "Anta", sans-serif;
        text-align:center;
        font-weight:300;
        color:#fff;
        width:100%;
        margin-top:45px;
        margin-bottom:30px;
        background: #0f0f0f;
    }
    /* The popup form - hidden by default */
    .form-popup {
        display: none;
        position: fixed;
        bottom: 10%;
        right: 30%;
        top:15%;
        z-index: 1000;
        padding:0px;
    }
    

    /* Add styles to the form container */
    .form-container {
        width: 600px;
        padding: 10px 10px 61px 10px;
        background-color: #0f0f0f;
        border: 2px solid #d7b551;
    }
    .form-container label{
        width:100%;
        float:left;
    }
    /* Full-width input fields */
    .form-container input[type=text], .form-container input[type=password], 
    .form-container input[type=date],.form-container input[type=time] {
        width:100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        background: #f1f1f1;
    }
    .form-container .select{
	    width:100%;
        padding: 15px;
        margin: 5px 0 22px 0;
        border: none;
        background: #f1f1f1;
        float:left;
    }
    /* When the inputs get focus, do something */
    .form-container input[type=text]:focus, .form-container input[type=password]:focus {
        background-color: #ddd;
        outline: none;
    }
    /* Set a style for the submit/login button */
    .form-container .btn {
        width: 250px;
        height: 45px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        color: #000;
        cursor: pointer;
        background: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/goldmetallic.webp') no-repeat 0px 0px / 250px 45px;
        border:1px solid #000;
        margin-top:30px;
        border-radius:0px;
    }
    .form-container label{
        color:#fff;
    }
    .form-container p{
        color: #fff;
    }
    /* Add a red background color to the cancel button */
    .form-container .cancel {
	    width:35px;
	    height:35px;
	    float:right;
	    font-size:1.5em;
	    margin-top:0px;
	    border-radius:0px;
	    padding:0px;
	    background: url('https://sacredexecutiveprotection.9o9designsstaging.com/assets/images/goldmetallic.webp') no-repeat 0px 0px / 35px 35px;
	    border:1px solid #0f0f0f;
    }
    /* Add some hover effects to buttons */
   .form-container .btn:hover, .btngold:hover {
        opacity: 1;
    }
    
    /*** counter css ***/
   
    #clientscount,
    #hourscount,
    #dayscount,
    #yearscount{
        animation: counter 3.9s  ease-in-out;
        counter-reset: num var(--num);
    }

    #clientscount::before,
    #hourscount::before,
    #dayscount::before,
    #yearscount::before{
        content: counter(num);
    }

    #clientscount { --num:300; }
    #hourscount { --num:24; }
    #dayscount { --num:7; }
    #yearscount { --num:21; }

    @property --num {
        syntax: "<integer>";
        initial-value: 0;
        inherits: false;
    }

    @keyframes counter {
        from {
        --num: 0; 
      }
        to {
        --num: 100;
      }
    }
    
 /**** animation ***/ 
 @keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 5s ease;
  animation-delay: 3s; /* No delay initially */
}  

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInLeft 1s ease;
  animation-delay: 1s; /* No delay initially */
}

@keyframes slideInRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.slide-in-right {
  animation: slideInRight 1s ease;
  animation-delay: 3s; /* No delay initially */
}

@keyframes scaleUp {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}

.scale-up {
  animation: scaleUp 3s ease;
}



}/*** end media ***/