/*Loader starts*/
#loading{
    width: 100%;
    height: 100vh;
    background:whitesmoke;
    z-index: 999;
    position: fixed;
}
#loading .aligns{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background:whitesmoke;
}
#loading .aligns img{
    margin-left: 45%;
}
#loading .aligns .container{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
#loading .aligns .ring1{
    width: 250px;
    height: 250px;
    border:0px solid whitesmoke;
    border-radius: 50%;
    position: absolute;
}
#loading .aligns .ring1{
    border-bottom-width: 8px;
    border-color: rgb(0, 0, 61);
    animation: rotate1 1s linear infinite;
}

@keyframes rotate1{
    0%{
        transform: rotateX(35deg) rotateY(-25deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(35deg) rotateY(-25deg) rotateZ(360deg);
    }
}

#loading .aligns .ring2{
    width: 250px;
    height: 250px;
    border:0px solid whitesmoke;
    border-radius: 50%;
    position: absolute;
}
#loading .aligns .ring2{
    border-bottom-width: 8px;
    border-color: rgb(0, 0, 61);
    animation: rotate2 1s linear infinite;
}

@keyframes rotate2{
    0%{
        transform: rotateX(35deg) rotateY(-145deg) rotateZ(0deg);
    }
    100%{
        transform: rotateX(35deg) rotateY(-145deg) rotateZ(360deg);
    }
}
/*Loader ends*/



/*smooth scroll behaviour starts*/
html {
    scroll-behavior: smooth;
}
/*smooth scroll behaviour ends*/

/*head starts*/
.upperhead .rlogo{
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
}
.upperhead .rlogo .logo{
    margin-left: 20px;
    display: inline-block;   
}

.upperhead .rlogo .logo img{   
    display: inline-block;
    margin-top: auto;
}
.upperhead .rlogo .cname1{
    display: inline-block;
    position: absolute;
    top: 0px;

}
.upperhead .rlogo .cname1 h1{
    font-size: 62px;
    color:green;
    font-family: 'Times New Roman', Times, serif;
}
.upperhead .rlogo .cname2{
    display: inline-block;
    color:rgb(0, 0, 61);
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: auto;
    top:58px;
    font-size: 19px;
}

.upperhead .navbar1{
   position: absolute;
   margin-top: auto;
   margin-top: 10px;
   margin-left: 280px;
   display:inline-block;
   font-weight: lighter;
   top: 20px;
}
.upperhead .navbar1 ul{
    list-style: none;
}
.upperhead .navbar1 ul li{
    margin-left: 20px;
    display: inline-block;
}
.upperhead .navbar1 ul li #opt{
    color:rgb(0, 0, 61);
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    font-weight: lighter;
}
.upperhead .navbar1 ul li #opt2{
    color:whitesmoke;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    margin-left: 140px;
    font-weight: lighter;
    background-color: rgb(0, 0, 61);
    padding: 10px;
    border-radius: 30px;
}
.upperhead .navbar1 ul li #opt2:hover{
    background-color: green;
    transition: 0.2s;
}
.upperhead .navbar1 ul li #bell{
    color:rgb(0, 0, 61);
    font-size: 20px;
    margin-left: 60px;
}
.dropbtn {
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    padding: 16px;
    font-size: 16px;
    border: none;
}
.dropbtn:hover{
    cursor: pointer;
}
  
.dropdown {
    position: relative;
    display: inline-block;
}
  
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
  
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-content a:hover {background-color:rgb(0, 0, 61);
 text-decoration: none;
 color: white;}
  
.dropdown:hover .dropdown-content {display: block;}
  
.dropdown:hover .dropbtn {background-color: rgb(255, 255, 255);}
/*head ends*/

/*security guards service details starts*/
.securityguards{
    background-color: rgb(3, 3, 26);
}
.securityguards .heading{
    display: inline-block;
}
.securityguards .heading h1{
    color: whitesmoke;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 50px;
    margin-top: 100px;
    margin-left: 30px;
}
/*security guards service details ends*/
/*img starts sgs*/
.securityguards img{
    position: absolute;
    right: 0px;
}
/*img ends sgs*/
/*Typing animation starts*/
.securityguards .autoytype{
    margin-left: 31px; 
    display: flex;
    justify-content: left;
    align-items: left;
    background-color: rgb(3, 3, 26);
}

.securityguards .autoytype .typed {
    line-height: 35px;
    width: 50%;
    font-size: 21px;
    text-align: left;
    font-weight: lighter;
    color: rgb(205, 205, 205);
    vertical-align: text-bottom;
    position: absolute;
}

.securityguards .autoytype .typed::after{
    content: "|";
    font-size: 150%;
    line-height: 30px;
    animation: blink .75s step-end infinite;
}

@keyframes blink {
    from, to { color: transparent }
    50% { color: rgb(0, 215, 0); }
}
/*Typing animation ends*/
/*security guards service details ends*/


/*security guards service cards starts*/
.cards{
    margin-left: 2px;
    align-items: center;
    background-color: rgb(0, 0, 61);
    border: none;
}
.cards .card{
    display: inline-block;
    /*margin-left: 25px;*/
}

.flip-card {
    background-color: transparent;
    width: 330px;
    height: 330px;
    perspective: 1000px;
    border: none;
}
  
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border: none;
}
  
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    border: none;
}
  
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: none;
}
  
.flip-card-front {
    background-color: whitesmoke;
    color:rgb(0, 0, 61);
    font-weight: bold;
    border: none;
}
  
.flip-card-back {
    background-color: rgb(0, 0, 61);
    color: whitesmoke;
    transform: rotateY(180deg);
    border: none;
}
.card:hover{
    cursor: pointer;
}
/*security guards service cards ends*/

/*body guard starts*/
.bodyguards{
    background-color: black;
}
.bodyguards .bdgimg{
    display: inline-block;
    position: absolute;
}
.bodyguards h1{
    color: whitesmoke;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 50px;
    margin-top: 140px;
    margin-left: 550px;
    display: inline-block;
}
/*body guard ends*/
/*body guards autotype starts*/
.bodyguards{
    margin-top: 10px;
}
.bodyguards .autoytype{
    margin-left: 555px;
}
.bodyguards .autoytype .typed {
    line-height: 35px;
    width: 50%;
    font-size: 21px;
    font-weight: lighter;
    text-align: left;
    color: rgb(205, 205, 205);
    vertical-align: text-bottom;
    display: inline-block;
    position: absolute;
}

.bodyguards .autoytype .typed::after{
    content: "|";
    font-size: 150%;
    line-height: 30px;
    animation: blink .75s step-end infinite;
}
.bodyguards .btn { 
    background-color: green;
    margin-left: 550px;
    margin-top:220px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    display: inline-block;
    position: absolute;
    color: whitesmoke;
    opacity: 0;
}
.bodyguards .btn a{
    color: whitesmoke;
    text-decoration: none;
}
.bodyguards .btn:hover{
    background-color: rgb(0, 0, 61);
    transition: 0.2s;
}
@keyframes blink {
    from, to { color: transparent }
    50% { color: rgb(0, 215, 0); }
}
/*body guards autotype ends*/

/*Protocol Services Starts*/
.protocol{
    background-color: #f1f1f1;
}
.protocol .heading1{
    display: inline-block;
}
.protocol .heading1 #first{
    border-left-style: solid;
    border-color: rgb(0, 0, 61);
    border-width: 15px;
    margin-top: auto;
    margin-left: 20px;
    padding: 4px;
    color: green;
    display:inline-block;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 32px;
    /*font-weight: lighter;*/
}
.protocol .heading1 #next{
    display:inline-block;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
    font-size: 32px;
    color: rgb(0, 0, 61);
    /*font-weight: lighter;*/
}
.protocol .paragraph p{
    display: inline-block;
    margin-left: 40px;
    font-size: 20px;
}
.protocol .btn{
    display: inline-block;
    margin-left: 30px;
}
.protocol .btn a{
    padding: 10px;
    border-radius: 20px;
    border-width: 1px;
    font-size: 20px;
    color: whitesmoke;
    background-color: rgb(0, 0, 61);
    text-decoration: none;
}
.protocol .btn a:hover{
    
    background-color: green;
}
.protocol .img{
    position: absolute;
    display: inline-block;
    right: 30px;
    top: 1410px;
}

/*Protocol Services Ends*/

/*Cash In Transit Services starts*/
.cashintransit .img{
    display: inline-block;
    margin-left: 20px;
}
.cashintransit .heading1{
    position: absolute;
    display: inline-block;
}
.cashintransit .heading1 #first{
    border-left-style: solid;
    border-color: rgb(0, 0, 61);
    border-width: 15px;
    margin-top: auto;
    margin-left: 20px;
    padding: 4px;
    color: green;
    display:inline-block;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 32px;
    /*font-weight: lighter;*/
}
.cashintransit .heading1 #next{
    display:inline-block;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
    font-size: 32px;
    color: rgb(0, 0, 61);
    /*font-weight: lighter;*/
}
.cashintransit .paragraph{
    display: inline-block;
    position: absolute;
    margin-top: 70px;
    margin-left: 40px;
    font-size: 20px;
}
.cashintransit .btn{
    padding: 10px;
    border-radius: 20px;
    font-size: 20px;
    color: whitesmoke;
    background-color: rgb(0, 0, 61);
    text-decoration: none;
    position: absolute;
    margin-top: 260px;
    margin-left: 40px;
}
.cashintransit .btn a{
    text-decoration: none;
    color: whitesmoke;
}
.cashintransit .bottomspace{
    display:none;
}
.cashintransit .btn:hover{
    background-color: green;
}
/*Cash In Transit Ends*/

/*Equipments Services Starts*/
.securityequipments{
    background-color: #f1f1f1;
}
.securityequipments .heading1 #first{
    border-left-style: solid;
    border-color: rgb(0, 0, 61);
    border-width: 15px;
    margin-top: auto;
    margin-left: 20px;
    padding: 4px;
    color: green;
    display:inline-block;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 32px;
    /*font-weight: lighter;*/
}
.securityequipments .heading1 #next{
    display:inline-block;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
    font-size: 32px;
    color: rgb(0, 0, 61);
    /*font-weight: lighter;*/
}
.securityequipments .paragraph{
    display: inline-block;
}
.securityequipments .paragraph p{
    margin-left: 40px;
    font-size: 20px;
}
.securityequipments .img{
    display: inline-block;
    position: absolute;
    top:2100px;
    right: 5px;
}
.cards2{
    margin-left: 2px;
    align-items: center;
    background-color:#f1f1f1;
    border: none;
}

.cards2 .card{
    display: inline-block;
    /*margin-left: 25px;*/
}

.cards2 .card .flip-card {
    background-color: transparent;
    width: 215px;
    height: 220px;
    perspective: 1000px;
    border: none;
}
  
.cards2 .card .flip-card .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border: none;
}
  
.cards2 .card .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
    border: none;
}
  
.cards2 .card .flip-card .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: none;
}
  
.cards2 .card .flip-card .flip-card-front {
    background-color: whitesmoke;
    color:rgb(0, 0, 61);
    font-weight: bold;
    border: none;
}
  
.cards2 .card .flip-card .flip-card-back {
    background-color: rgb(0, 0, 61);
    color: whitesmoke;
    transform: rotateY(180deg);
    border: none;
}
.cards2 .card .flip-card .card:hover{
    cursor: pointer;
}
/*Equipments Services Ends*/

/*Investiigation Services Starts*/
.investigation .heading1{
    text-align: center;
}
.investigation .heading1 #first{
    margin-top: auto;
    padding: 4px;
    color: green;
    display:inline-block;
    font-weight: bold;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 32px;
    /*font-weight: lighter;*/
}
.investigation .heading1 #next{
    display:inline-block;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-weight: bold;
    font-size: 32px;
    color: rgb(0, 0, 61);
    /*font-weight: lighter;*/
}

/*Typing animation starts*/
.investigation .autoytype3{
    margin-left: 31px; 
    display: flex;
    justify-content: left;
    align-items: left;
}

.investigation .autoytype3 .typed3 {
    line-height: 35px;
    width: 40%;
    font-size: 21px;
    text-align: left;
    color: black;
    vertical-align: text-bottom;
    position: absolute;
}

.investigation .autoytype3 .typed3::after{
    content: "|";
    font-size: 150%;
    line-height: 30px;
    animation: blink3 .75s step-end infinite;
}

@keyframes blink3 {
    from, to { color: transparent }
    50% { color: rgb(0, 0, 61); }
}
/*Typing animation ends*/

/*finger print animation starts*/
.investigation .mfingerp{
    display: inline-block;
    right: 500px;
    margin-top: 90px;
    position: absolute;
}
.investigation .mfingerp .fingerprints{
    display: flex;
    justify-content: center;
    align-items: center;
}
.investigation .mfingerp .fingerprints .scan{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.investigation .mfingerp .fingerprints .scan .fingerprint {
    position: relative;
    width: 200px;
    height: 270px;
    background: url("assets/fingerPrint_01.png");
    background-size: 200px;
}
.investigation .mfingerp .fingerprints .scan .fingerprint::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("assets/fingerPrint_02 2.png");
    background-size: 200px;
    animation: animate 4s ease-in-out infinite;
}
@keyframes animate {
    0%,
    100% {
      height: 0%;
    }
    50% {
      height: 100%;
    }
}
.investigation .mfingerp .fingerprints .scan .fingerprint::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgb(0, 0, 61);
    border-radius: 8px;
    filter: drop-shadow(0 0 20px #00003d) drop-shadow(0 0 60px #00003d);
    animation: animate_line 4s ease-in-out infinite;
}
@keyframes animate_line {
    0%,
    100% {
      top: 0%;
    }
    50% {
      top: 100%;
    }
}
.investigation .magnifyingg{
    position: absolute;
    right: 330px;
    margin-top: 50px;
}
.investigation .magnifyingg img{
    position: relative;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count:infinite;
    animation-direction: alternate; 
}
@keyframes example {
    0%   {left:0px; top:0px;}
    0%   {left:0px; top:0px;}
    25%  {left:200px; top:0px;}
    50%  {left:200px; top:200px;}
    75%  {left:0px; top:200px;}
    100% {left:0px; top:0px;}
}
/*finger print animation ends*/
.investigation .btn{
    background-color: #00003d;
    margin-left: 30px;
    margin-top: 200px;
}
.investigation .btn a{
    text-decoration: none;
    color:whitesmoke;
}
.investigation .btn:hover{
    background-color: green;
    transition: 0.2s;
}
/*Investiigation Services Ends*/

/*quick links CSS starts*/
.quicklinks{
    background-color: black;
}
.quicklinks .bottomspace{
    display: none;
}
.quicklinks h3{
    margin-left: 400px;
    color: rgba(245, 245, 245, 0.75);
}
.quicklinks .mid{
    margin-left: 200px;
    text-align: center;
    display: inline-block;
}
.quicklinks .mid ul{
    list-style: none;
}
.quicklinks .mid ul li{
    margin-top: 8px;
}
.quicklinks .mid ul li a{
    text-decoration: none;
    color:rgba(245, 245, 245, 0.432);
    font-weight: lighter;
}

.quicklinks .right{
    position: absolute;
    left:590px;
    text-align: center;
    color: whitesmoke;
    display: inline-block;
}
.quicklinks .right h3{
    text-align: center;
}
.quicklinks .right ul{
    list-style: none;
}
.quicklinks .right ul li{
    margin-top: 8px;
}
.quicklinks .right ul li a{
    text-decoration: none;
    color:rgba(245, 245, 245, 0.432);
    font-weight: lighter;
}
.quicklinks .mid ul li a:hover{
    color:whitesmoke;
}
.quicklinks .right ul li a:hover{
    color:whitesmoke;
}
.quicklinks .contactus{
    display:inline-block;
    position:absolute;
    right:100px;
}
.quicklinks .contactus h3{
    margin-left: 40px;
    font-size: 40px;
    
}
.quicklinks .contactus h4{
    margin-left: 40px;
    font-size: 35px;
    color: rgba(245, 245, 245, 0.75);
}
.quicklinks .contactus img{
    display: inline-block;
    filter: brightness(0.35);
}
.quicklinks .contactus .links2{
    margin-left: 0px;
}
.quicklinks .contactus .links2 ul{
    list-style: none;
    display: inline-block;
}
.quicklinks .contactus .links2 ul li{
    display: inline-block;
    margin-left: 18px;
}
.quicklinks .contactus .links2 ul li img:hover{
    filter: brightness(1.00);   
}
.quicklinks .contactus .links{
    margin-left: 0px;
}
.quicklinks .contactus .links ul{
    list-style: none;
    display: inline-block;
}
.quicklinks .contactus .links ul li{
    display: inline-block;
    margin-left: 18px;
}
.quicklinks .contactus .links ul li a img{
    filter: brightness(0.35); 
}
.quicklinks .contactus .links ul li a img:hover{
    filter: brightness(1.00); 
}

/*quick links CSS ends*/
/*quick links CSS ends*/

/*Up Scroll Arrow Button CSS starts*/
.scrollbtn{
    background-color: rgba(0, 0, 61, 0.855);
    position: fixed;
    display: inline-block;
    bottom:20px;
    right: 20px;
    z-index: 999;
    border-radius: 9px;
}
.scrollbtn .scrollup{
    padding-top:8px;
    padding-bottom: 8px;
}
.scrollbtn .scrollup img{
    padding: 6px;
}
.scrollbtn:hover{
    cursor: pointer;
    background-color: rgb(0, 0, 61);
    /*bottom:25px;*/
    transition: 0.2s;
}
/*Up Scroll Arrow Button CSS ends*/

/*slider menu starts*/
.upperhead .sliders{
    display: inline-block;
    position: fixed;
    padding: 30px;
    background-color: #f1f1f1;
    top: 80px;
    transition: 0.5s;
    z-index: 999;
    right: -300px;
}

.upperhead .sliders .slidemenu1 ul li{
    list-style: none;
    text-align: center;
    padding-right: 25px;
    margin-top: 5px;
}
.upperhead .sliders .slidemenu1 ul li a{
    text-decoration: none;
    font-size: 18px;
    color:rgb(0, 0, 61);

}
.upperhead .sliders .menu2{
    padding:7px;
    margin-bottom: 10px;
}
::placeholder{
    padding:2px;
    font-size: 19px;
}
.upperhead .sliders .menu2 i{
    padding:3px;
    border-radius: 3px;
}
.upperhead .sliders .menu2 i:hover{
    cursor: pointer;
    transition: 0.3s;
}
.upperhead #check{
    margin-left: 1090px;
    display: inline-block;
    position:relative;
    display:none;
}
.upperhead #btn{
    opacity: 0;
    display: inline-block;
    color:black;
    margin-left: 1090px;
}
.upperhead #cancel{
    display: inline-block;
    color:black;
    margin-left: 1090px;
}
.upperhead label #btn,label #cancel{
    position:absolute;
    cursor: pointer;
}
.upperhead label #btn{
    position: absolute;
    right :20px;
    top:25px;
    padding:12px;
    font-size: 25px;
    transition:0.5s;
}
.upperhead label #btn:hover{
    color: black;
}
.upperhead label #cancel{
    position: fixed;
    z-index: 1111;
    right:20px;
    top: 25px;
    font-size: 25px;
    padding:12px;
    opacity: 0;
}
.upperhead label #cancel:hover{
    color:black
}
.upperhead #check:checked ~ .sliders{
    right: 30px;
}
.upperhead #check:checked ~ label #btn{
    opacity: 0;
    pointer-events: none;
}
.upperhead #check:checked ~ label #cancel{
    opacity: 1;
}

/*responsiveness starts*/

/*responsiveness ends*/


/*responsiveness starts*/
@media only screen and (max-width: 1280px) {
    #loading .aligns img{
        margin-left: 570px;
    }
    /*slider navbar starts*/
    .upperhead .navbar1{
        position: absolute;
        margin-top: auto;
        margin-top: 10px;
        margin-left: 280px;
        display:inline-block;
        font-weight: lighter;
        top: 20px;
        opacity: 0;
    }
    .upperhead .sliders{
        opacity: 10;
        display: inline-block;
        background-color: whitesmoke;
        transition: 0.5s;
        position: fixed;
        z-index: 999;
        padding: 30px;
        top: 80px;
        right: -300px;
    }
    .upperhead .sliders .slidemenu1 ul li{
        list-style: none;
        text-align: center;
        padding-right: 25px;
        margin-top: 5px;
    }
    .upperhead .sliders .slidemenu1 ul li a{
        text-decoration: none;
        font-size: 18px;
        color:rgb(0, 0, 61);
    
    }
    .upperhead .sliders .menu2{
        padding:7px;
        margin-bottom: 10px;
    }
    ::placeholder{
        padding:2px;
        font-size: 19px;
    }
    .upperhead .sliders .menu2 i{
        padding:3px;
        border-radius: 3px;
    }
    .upperhead .sliders .menu2 i:hover{
        cursor: pointer;
        transition: 0.3s;
    }
    .upperhead #check{
        right: 20px;
        display: inline-block;
        position:absolute;
        display:none;
    }
    .upperhead #btn{
        opacity: 10;        
        display: inline-block;
        color:rgb(0, 0, 61);
        right: 20px;
    }
    .upperhead #cancel{
        display: inline-block;
        color:black;
    }
    .upperhead label{
        position: absolute;
        right: 20px;
    }
    .upperhead label #btn,label #cancel{
        position:absolute;
        cursor: pointer;
    }
    .upperhead label #btn{
        position: absolute;
        right: 20px;
        padding:12px;
        font-size: 25px;
        transition:0.5s;
    }
    .upperhead label #btn:hover{
        color: black;
    }
    .upperhead label #cancel{
        position: absolute;
        z-index: 1111;
        right:20px;
        font-size: 25px;
        padding:12px;
        opacity: 0;
    }
    .upperhead label #cancel:hover{
        color:black
    }
    .upperhead #check:checked ~ .sliders{
        right: 50px;
    }
    .upperhead #check:checked ~ label #btn{
        opacity: 0;
        pointer-events: none;
    }
    .upperhead #check:checked ~ label #cancel{
        opacity: 10;
    }
    
    /*security guards service cards starts*/
    .cards{
        margin-left: 1px;
        align-items: center;
        background-color: rgb(0, 0, 61);
        border: none;
    }
    .cards .card{
        display: inline-block;
        /*margin-left: 25px;*/
    }

    .flip-card {
        background-color: transparent;
        width: 310px;
        height: 310px;
        perspective: 1000px;
        border: none;
    }
    
    .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        border: none;
    }
    
    .flip-card:active .flip-card-inner {
        transform: rotateY(180deg);
        border: none;
    }
    
    .flip-card-front, .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border: none;
    }
    
    .flip-card-front {
        background-color: whitesmoke;
        color:rgb(0, 0, 61);
        font-weight: bold;
        border: none;
    }
    
    .flip-card-back {
        background-color: rgb(0, 0, 61);
        color: whitesmoke;
        transform: rotateY(180deg);
        border: none;
    }
    .card:hover{
        cursor: pointer;
    }
    .bodyguards{
        background-color: black;
    }
    .bodyguards .bdgimg{
        display: inline-block;
        position: absolute;
    }
    .bodyguards h1{
        color: whitesmoke;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 50px;
        margin-top: 120px;
        margin-left: 550px;
        display: inline-block;
    }
    .bodyguards .btn { 
        background-color: green;
        margin-left: 550px;
        margin-top:230px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        display: inline-block;
        position: absolute;
        color: whitesmoke;
        opacity: 0;
    }

    /*protocol starts*/
    .protocol{
        background-color: #f1f1f1;
    }
    .protocol .heading1{
        display: inline-block;
    }
    .protocol .heading1 #first{
        border-left-style: solid;
        border-color: rgb(0, 0, 61);
        border-width: 15px;
        margin-top: auto;
        margin-left: 20px;
        padding: 4px;
        color: green;
        display:inline-block;
        font-weight: bold;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 32px;
        /*font-weight: lighter;*/
    }
    .protocol .heading1 #next{
        display:inline-block;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-weight: bold;
        font-size: 32px;
        color: rgb(0, 0, 61);
        /*font-weight: lighter;*/
    }
    .protocol .paragraph p{
        display: inline-block;
        margin-left: 40px;
        font-size: 20px;
    }
    .protocol .btn{
        display: inline-block;
        margin-left: 30px;
    }
    .protocol .btn a{
        padding: 10px;
        border-radius: 20px;
        border-width: 1px;
        font-size: 20px;
        color: whitesmoke;
        background-color: rgb(0, 0, 61);
        text-decoration: none;
    }
    .protocol .btn a:hover{
        
        background-color: green;
    }
    .protocol .img{
        position: absolute;
        display: inline-block;
        right: 30px;
        top: 1370px;
    }
    /*protocol ends*/

    /*cash in transit starts*/
    .cashintransit .btn{
        padding: 10px;
        border-radius: 20px;
        font-size: 20px;
        color: whitesmoke;
        background-color: rgb(0, 0, 61);
        text-decoration: none;
        position: absolute;
        margin-top: 290px;
        margin-left: 40px;
    }
    /*cash in transit ends*/

    /*equipments starts*/
    .securityequipments .img{
        display: inline-block;
        position: absolute;
        top:2050px;
        right: 5px;
    }
    .cards2{
        margin-left: 2px;
        align-items: center;
        background-color:#f1f1f1;
        border: none;
    }
    
    .cards2 .card{
        display: inline-block;
        /*margin-left: 25px;*/
    }
    
    .cards2 .card .flip-card {
        background-color: transparent;
        width: 200px;
        height: 210px;
        perspective: 1000px;
        border: none;
    }
      
    .cards2 .card .flip-card .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        border: none;
    }
      
    .cards2 .card .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
        border: none;
    }
      
    .cards2 .card .flip-card .flip-card-front, .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border: none;
    }
      
    .cards2 .card .flip-card .flip-card-front {
        background-color: whitesmoke;
        color:rgb(0, 0, 61);
        font-weight: bold;
        border: none;
    }
      
    .cards2 .card .flip-card .flip-card-back {
        background-color: rgb(0, 0, 61);
        color: whitesmoke;
        transform: rotateY(180deg);
        border: none;
    }
    .cards2 .card .flip-card .card:hover{
        cursor: pointer;
    }
    /*equipments ends*/


}


@media only screen and (max-width: 1024px) {
    #loading .aligns img{
        margin-left: 570px;
    }
    /*slider navbar starts*/
    .upperhead .navbar1{
        position: absolute;
        margin-top: auto;
        margin-top: 10px;
        margin-left: 280px;
        display:inline-block;
        font-weight: lighter;
        top: 20px;
        opacity: 0;
    }
    .upperhead .sliders{
        opacity: 10;
        display: inline-block;
        background-color: whitesmoke;
        transition: 0.5s;
        position: fixed;
        z-index: 999;
        padding: 30px;
        top: 80px;
        right: -300px;
    }
    .upperhead .sliders .slidemenu1 ul li{
        list-style: none;
        text-align: center;
        padding-right: 25px;
        margin-top: 5px;
    }
    .upperhead .sliders .slidemenu1 ul li a{
        text-decoration: none;
        font-size: 18px;
        color:rgb(0, 0, 61);
    
    }
    .upperhead .sliders .menu2{
        padding:7px;
        margin-bottom: 10px;
    }
    ::placeholder{
        padding:2px;
        font-size: 19px;
    }
    .upperhead .sliders .menu2 i{
        padding:3px;
        border-radius: 3px;
    }
    .upperhead .sliders .menu2 i:hover{
        cursor: pointer;
        transition: 0.3s;
    }
    .upperhead #check{
        right: 20px;
        display: inline-block;
        position:absolute;
        display:none;
    }
    .upperhead #btn{
        opacity: 10;        
        display: inline-block;
        color:rgb(0, 0, 61);
        right: 20px;
    }
    .upperhead #cancel{
        display: inline-block;
        color:black;
    }
    .upperhead label{
        position: absolute;
        right: 20px;
    }
    .upperhead label #btn,label #cancel{
        position:absolute;
        cursor: pointer;
    }
    .upperhead label #btn{
        position: absolute;
        right: 20px;
        padding:12px;
        font-size: 25px;
        transition:0.5s;
    }
    .upperhead label #btn:hover{
        color: black;
    }
    .upperhead label #cancel{
        position: absolute;
        z-index: 1111;
        right:20px;
        font-size: 25px;
        padding:12px;
        opacity: 0;
    }
    .upperhead label #cancel:hover{
        color:black
    }
    .upperhead #check:checked ~ .sliders{
        right: 50px;
    }
    .upperhead #check:checked ~ label #btn{
        opacity: 0;
        pointer-events: none;
    }
    .upperhead #check:checked ~ label #cancel{
        opacity: 10;
    }
    
    /*security guards service cards starts*/
    .securityguards .heading h1{
        color: whitesmoke;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 50px;
        margin-top: 50px;
        margin-left: 30px;
    }
    .securityguards img{
        position: absolute;
        right: 0px;
        height: 400px;
    }
    /*img ends sgs*/
    /*Typing animation starts*/
    .securityguards .autoytype{
        margin-left: 31px; 
        display: flex;
        justify-content: left;
        align-items: left;
        background-color: rgb(3, 3, 26);
    }
    
    .securityguards .autoytype .typed {
        line-height: 35px;
        width: 60%;
        font-size: 21px;
        text-align: left;
        font-weight: lighter;
        color: rgb(205, 205, 205);
        vertical-align: text-bottom;
        position: absolute;
    }
    .cards{
        margin-left: 1px;
        align-items: center;
        background-color: rgb(0, 0, 61);
        border: none;
    }
    .cards .card{
        display: inline-block;
        /*margin-left: 25px;*/
    }

    .flip-card {
        background-color: transparent;
        width: 250px;
        height: 250px;
        perspective: 1000px;
        border: none;
    }
    
    .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        border: none;
    }
    
    .flip-card:active .flip-card-inner {
        transform: rotateY(180deg);
        border: none;
    }
    .flip-card-inner h3{
        font-size: 25px;
    }
    .flip-card-inner img{
        height: 85px;
    }
    .flip-card-front h1{
        font-size: 27px;
    }
    .flip-card-front img{
        height: 170px;
    }
    .flip-card-front, .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border: none;
    }
    
    .flip-card-front {
        background-color: whitesmoke;
        color:rgb(0, 0, 61);
        font-weight: bold;
        border: none;
    }
    
    .flip-card-back {
        background-color: rgb(0, 0, 61);
        color: whitesmoke;
        transform: rotateY(180deg);
        border: none;
    }
    .card:hover{
        cursor: pointer;
    }
    .bodyguards{
        background-color: black;
    }
    .bodyguards .bdgimg{
        display: inline-block;
        position: absolute;
    }
    .bodyguards .bdgimg img{
        height:430px;
    }
    .bodyguards h1{
        color: whitesmoke;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 50px;
        margin-top: 60px;
        margin-left: 450px;
        display: inline-block;
    }
    .bodyguards .autoytype{
        margin-left: 450px;
    }
    .bodyguards .autoytype .typed {
        line-height: 35px;
        width: 50%;
        font-size: 21px;
        font-weight: lighter;
        text-align: left;
        color: rgb(205, 205, 205);
        vertical-align: text-bottom;
        display: inline-block;
        position: absolute;
    }
    
    .bodyguards .autoytype .typed::after{
        content: "|";
        font-size: 150%;
        line-height: 30px;
        animation: blink .75s step-end infinite;
    }
    .bodyguards .btn { 
        background-color: green;
        margin-left: 450px;
        margin-top:250px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        display: inline-block;
        position: absolute;
        color: whitesmoke;
        opacity: 0;
    }
    .bodyguards .btn a{
        color: whitesmoke;
        text-decoration: none;
    }
    .bodyguards .btn:hover{
        background-color: rgb(0, 0, 61);
        transition: 0.2s;
    }
    @keyframes blink {
        from, to { color: transparent }
        50% { color: rgb(0, 215, 0); }
    }

    /*protocol starts*/
    .protocol{
        background-color: #f1f1f1;
    }
    .protocol .heading1{
        display: inline-block;
    }
    .protocol .heading1 #first{
        border-left-style: solid;
        border-color: rgb(0, 0, 61);
        border-width: 15px;
        margin-top: auto;
        margin-left: 20px;
        padding: 4px;
        color: green;
        display:inline-block;
        font-weight: bold;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 32px;
        /*font-weight: lighter;*/
    }
    .protocol .heading1 #next{
        display:inline-block;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-weight: bold;
        font-size: 32px;
        color: rgb(0, 0, 61);
        /*font-weight: lighter;*/
    }
    .protocol .paragraph p{
        display: inline-block;
        margin-left: 40px;
        font-size: 20px;
    }
    .protocol .btn{
        display: inline-block;
        margin-left: 30px;
    }
    .protocol .btn a{
        padding: 10px;
        border-radius: 20px;
        border-width: 1px;
        font-size: 20px;
        color: whitesmoke;
        background-color: rgb(0, 0, 61);
        text-decoration: none;
    }
    .protocol .btn a:hover{
        background-color: green;
    }
    .protocol .img{
        position: absolute;
        display: inline-block;
        right: 0px;
        top: 1190px;
        height: 100px;
    }
    .protocol .img img{
        height: 300px;
        width:500px
    }
    /*protocol ends*/

    /*cash in transit starts*/

    .cashintransit .img{
        display: inline-block;
        margin-left: 20px;
    }
    .cashintransit .img img{
        height: 370px;
        width: 490px;
    }
    .cashintransit .heading1{
        position: absolute;
        display: inline-block;
    }
    .cashintransit .heading1 #first{
        border-left-style: solid;
        border-color: rgb(0, 0, 61);
        border-width: 15px;
        margin-top: auto;
        margin-left: 20px;
        padding: 4px;
        color: green;
        display:inline-block;
        font-weight: bold;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 32px;
        /*font-weight: lighter;*/
    }
    .cashintransit .heading1 #next{
        display:inline-block;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-weight: bold;
        font-size: 32px;
        color: rgb(0, 0, 61);
        /*font-weight: lighter;*/
    }
    .cashintransit .paragraph{
        display: inline-block;
        position: absolute;
        margin-top: 70px;
        margin-left: 40px;
        font-size: 20px;
    }
    .cashintransit .paragraph p br{
        display: none;
    }
    .cashintransit .btn{
        padding: 10px;
        border-radius: 20px;
        font-size: 20px;
        color: whitesmoke;
        background-color: rgb(0, 0, 61);
        text-decoration: none;
        position: absolute;
        margin-top: 310px;
        margin-left: 40px;
    }
    .cashintransit .btn a{
        text-decoration: none;
        color: whitesmoke;
    }
    .cashintransit .btn:hover{
        background-color: green;
    }
    /*cash in transit ends*/

    /*equipments starts*/
    .securityequipments .img{
        display: inline-block;
        position: absolute;
        top:1950px;
        right: 5px;
    }
    .securityequipments .img img{
        width: 450px;
    }
    .securityequipments .paragraph{
        margin-top: 0px;
    }
    .securityequipments .paragraph p br{
        display: none;
    }
    .securityequipments .paragraph p{
        width: 50%;
    }
    .cards2{
        margin-left: 0px;
        align-items: center;
        background-color:#f1f1f1;
        border: none;
    }
    
    .cards2 .card{
        display: inline-block;
        /*margin-left: 25px;*/
    }
    
    .cards2 .card .flip-card {
        background-color: transparent;
        width: 160px;
        height: 170px;
        perspective: 1000px;
        border: none;
    }
      
    .cards2 .card .flip-card .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        border: none;
    }
      
    .cards2 .card .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
        border: none;
    }
      
    .cards2 .card .flip-card .flip-card-front, .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border: none;
    }
    .cards2 .card .flip-card .flip-card-front img{
        height: 80px;
    }
    .cards2 .card .flip-card .flip-card-front {
        background-color: whitesmoke;
        color:rgb(0, 0, 61);
        font-weight: bold;
        border: none;
    }
      
    .cards2 .card .flip-card .flip-card-back {
        background-color: rgb(0, 0, 61);
        color: whitesmoke;
        transform: rotateY(180deg);
        border: none;
    }
    .cards2 .card .flip-card .card:hover{
        cursor: pointer;
    }
    /*equipments ends*/

    /*investigation starts*/
    .investigation .heading1{
        text-align: center;
    }
    .investigation .heading1 #first{
        margin-top: auto;
        padding: 4px;
        color: green;
        display:inline-block;
        font-weight: bold;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 32px;
        /*font-weight: lighter;*/
    }
    .investigation .heading1 #next{
        display:inline-block;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-weight: bold;
        font-size: 32px;
        color: rgb(0, 0, 61);
        /*font-weight: lighter;*/
    }
    
    /*Typing animation starts*/
    .investigation .autoytype3{
        margin-left: 31px; 
        display: flex;
        justify-content: left;
        align-items: left;
    }
    
    .investigation .autoytype3 .typed3 {
        line-height: 35px;
        width: 40%;
        font-size: 21px;
        text-align: left;
        color: black;
        vertical-align: text-bottom;
        position: absolute;
    }
    
    .investigation .autoytype3 .typed3::after{
        content: "|";
        font-size: 150%;
        line-height: 30px;
        animation: blink3 .75s step-end infinite;
    }
    
    @keyframes blink3 {
        from, to { color: transparent }
        50% { color: rgb(0, 0, 61); }
    }
    /*Typing animation ends*/
    
    /*finger print animation starts*/
    .investigation .mfingerp{
        display: inline-block;
        right: 300px;
        margin-top: 90px;
        position: absolute;
    }
    .investigation .mfingerp .fingerprints{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .investigation .mfingerp .fingerprints .scan{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .investigation .mfingerp .fingerprints .scan .fingerprint {
        position: relative;
        width: 200px;
        height: 270px;
        background: url("assets/fingerPrint_01.png");
        background-size: 200px;
    }
    .investigation .mfingerp .fingerprints .scan .fingerprint::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("assets/fingerPrint_02 2.png");
        background-size: 200px;
        animation: animate 4s ease-in-out infinite;
    }
    @keyframes animate {
        0%,
        100% {
          height: 0%;
        }
        50% {
          height: 100%;
        }
    }
    .investigation .mfingerp .fingerprints .scan .fingerprint::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 8px;
        background: rgb(0, 0, 61);
        border-radius: 8px;
        filter: drop-shadow(0 0 20px #00003d) drop-shadow(0 0 60px #00003d);
        animation: animate_line 4s ease-in-out infinite;
    }
    @keyframes animate_line {
        0%,
        100% {
          top: 0%;
        }
        50% {
          top: 100%;
        }
    }
    .investigation .magnifyingg{
        position: absolute;
        right: 200px;
        margin-top: 50px;
    }
    .investigation .magnifyingg img{
        height: 300px;
    }
    .investigation .magnifyingg img{
        position: relative;
        animation-name: example;
        animation-duration: 4s;
        animation-iteration-count:infinite;
        animation-direction: alternate; 
    }
    @keyframes example {
        0%   {left:0px; top:0px;}
        0%   {left:0px; top:0px;}
        25%  {left:200px; top:0px;}
        50%  {left:200px; top:200px;}
        75%  {left:0px; top:200px;}
        100% {left:0px; top:0px;}
    }
    /*finger print animation ends*/
    .investigation .btn{
        background-color: #00003d;
        margin-left: 30px;
        margin-top: 280px;
    }
    .investigation .btn a{
        text-decoration: none;
        color:whitesmoke;
    }
    .investigation .btn:hover{
        background-color: green;
        transition: 0.2s;
    }
    /*Investiigation Services Ends*/
    /*investigatiion ends*/

    /*quick links CSS starts*/
    .quicklinks{
        background-color: black;
    }
    .quicklinks .bottomspace{
        display: none;
    }
    .quicklinks h3{
        margin-left: 280px;
        color: rgba(245, 245, 245, 0.75);
    }
    .quicklinks .mid{
        margin-left: 100px;
        text-align: center;
        display: inline-block;
    }
    .quicklinks .mid ul{
        list-style: none;
    }
    .quicklinks .mid ul li{
        margin-top: 8px;
    }
    .quicklinks .mid ul li a{
        text-decoration: none;
        color:rgba(245, 245, 245, 0.432);
        font-weight: lighter;
    }

    .quicklinks .right{
        position: absolute;
        left:390px;
        text-align: center;
        color: whitesmoke;
        display: inline-block;
    }
    .quicklinks .right h3{
        text-align: center;
    }
    .quicklinks .right ul{
        list-style: none;
    }
    .quicklinks .right ul li{
        margin-top: 8px;
    }
    .quicklinks .right ul li a{
        text-decoration: none;
        color:rgba(245, 245, 245, 0.432);
        font-weight: lighter;
    }
    .quicklinks .mid ul li a:hover{
        color:whitesmoke;
    }
    .quicklinks .right ul li a:hover{
        color:whitesmoke;
    }
    .quicklinks .contactus{
        display:inline-block;
        position:absolute;
        right:100px;
    }
    .quicklinks .contactus h3{
        margin-left: 40px;
        font-size: 55px;
        
    }
    .quicklinks .contactus .links{
        margin-left: 0px;
    }
    .quicklinks .contactus .links ul{
        list-style: none;
        display: inline-block;
    }
    .quicklinks .contactus .links ul li{
        display: inline-block;
        margin-left: 6px;
    }
    .quicklinks .contactus .links ul li a img{
        filter: brightness(0.35); 
    }
    .quicklinks .contactus .links ul li a img:hover{
        filter: brightness(1.00); 
    }
    /*quick links CSS ends*/

}


@media only screen and (min-width: 360px) and (max-width: 820px){
    /*loading logo starts*/
    #loading .aligns img{
        margin-left: 115px;
    }
    /*loading logo ends*/
    /*logo company name*/
    /*head starts*/
    .upperhead .rlogo{
        margin-top: 5px;
        display: inline-block;
    }
    .upperhead .rlogo .logo{
        margin-left: 5px;
        display: inline-block;   
    }

    .upperhead .rlogo .logo img{   
        display: inline-block;
        margin-top: auto;
        height: 40px;
    }
    .upperhead .rlogo .cname1{
        display: inline-block;
        position: absolute;
        top: 0px;
    }
    .upperhead .rlogo .cname1 h1{
        font-size: 38px;
        color:green;
        font-family: 'Times New Roman', Times, serif;
    }
    .upperhead .rlogo .cname2{
        display: inline-block;
        color:rgb(0, 0, 61);
        position: absolute;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
        margin-top: auto;
        top:35px;
        font-size: 12px;
    }
/*logo company name*/

/*navbar 1*/
.upperhead .navbar1{
    display: none;
}
/*navbar 1*/
/*slider navbar*/
.upperhead .sliders{
    opacity: 10;
    display: inline-block;
    background-color: whitesmoke;
    transition: 0.5s;
    position: fixed;
    z-index: 999;
    padding: 30px;
    top: 50px;
    width: 100%;
    right: -700px;
}
.upperhead label{
    right: 0;
}
.upperhead .sliders .slidemenu1 ul li{
    list-style: none;
    text-align: center;
    padding-right: 25px;
    margin-top: 5px;
}
.upperhead .sliders .slidemenu1 ul li a{
    text-decoration: none;
    font-size: 18px;
    color:rgb(0, 0, 61);

}
.upperhead .sliders .menu2{
    padding:7px;
    margin-bottom: 10px;
}
::placeholder{
    padding:2px;
    font-size: 19px;
}
.upperhead .sliders .menu2 i:hover{
    cursor: pointer;
    transition: 0.3s;
}
.upperhead #check{
    right: 0px;
    display: inline-block;
    position:absolute;
    display:none;
}
.upperhead #btn{
    opacity: 10;        
    display: inline-block;
    color:rgb(0, 0, 61);
    right: 0px;
}
.upperhead #cancel{
    display: inline-block;
    color:black;
}
.upperhead label{
    position: absolute;
    right: 0px;
}
.upperhead label #btn,label #cancel{
    position:absolute;
    cursor: pointer;
}
.upperhead label #btn{
    position: absolute;
    right :0px;
    top:5px;
    padding:12px;
    font-size: 25px;
    transition:0.5s;
}
.upperhead label #btn:hover{
    color: black;
}
.upperhead label #cancel{
    position: absolute;
    z-index: 1111;
    right:0px;
    top: 5px;
    font-size: 25px;
    padding:12px;
    opacity: 0;
}
.upperhead label #cancel:hover{
    color:black
}
.upperhead #check:checked ~ .sliders{
    right: 0px;
}
.upperhead #check:checked ~ label #btn{
    opacity: 0;
    pointer-events: none;
}
.upperhead #check:checked ~ label #cancel{
    opacity: 10;
}
/*slider navbar ends*/
    
    /*security guards service cards starts*/
    .securityguards .heading h1{
        color: whitesmoke;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 30px;
        margin-top: 10px;
        margin-left: 10px;
    }
    .securityguards img{
        display: none;
        right: 0px;
        height: 400px;
    }
    /*img ends sgs*/
    /*Typing animation starts*/
    .securityguards .autoytype{
        margin-left: 10px; 
        display: flex;
        justify-content: left;
        align-items: left;
        background-color: rgb(3, 3, 26);
    }
    
    .securityguards .autoytype .typed {
        line-height: 25px;
        width: 90%;
        font-size: 17px;
        text-align: left;
        font-weight: lighter;
        color: rgb(205, 205, 205);
        vertical-align: text-bottom;
        position: absolute;
    }
    .cards{
        margin-left: 1px;
        align-items: center;
        background-color: rgb(0, 0, 61);
        border: none;
    }
    .cards .card{
        display: inline-block;
        /*margin-left: 25px;*/
    }

    .flip-card {
        background-color: transparent;
        width: 370px;
        height: 370px;
        perspective: 1000px;
        border: none;
    }
    
    .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        border: none;
    }
    
    .flip-card:active .flip-card-inner {
        transform: rotateY(180deg);
        border: none;
    }
    .flip-card-inner h3{
        font-size: 35px;
    }
    .flip-card-inner p{
        font-size: 18px;
    }
    .flip-card-inner img{
        height: 185px;
    }
    .flip-card-front h1{
        font-size: 38px;
    }
    .flip-card-front img{
        height: 170px;
    }
    .flip-card-front, .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border: none;
    }
    
    .flip-card-front {
        background-color: whitesmoke;
        color:rgb(0, 0, 61);
        font-weight: bold;
        border: none;
    }
    
    .flip-card-back {
        background-color: rgb(0, 0, 61);
        color: whitesmoke;
        transform: rotateY(180deg);
        border: none;
    }
    .card:hover{
        cursor: pointer;
    }
    .bodyguards{
        background-color: black;
    }
    .bodyguards .bdgimg{
        display: inline-block;
        position: absolute;
    }
    .bodyguards .bdgimg img{
        height:430px;
        display: none;
    }
    .bodyguards h1{
        color: whitesmoke;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 30px;
        margin-top: 10px;
        margin-left: 10px;
        display: inline-block;
    }
    .bodyguards .autoytype{
        margin-left: 10px;
    }
    .bodyguards .autoytype .typed {
        line-height: 25px;
        width: 90%;
        font-size: 18px;
        text-align: left;
        font-weight: lighter;
        color: rgb(205, 205, 205);
        vertical-align: text-bottom;
        position: absolute;
    }
    
    .bodyguards .autoytype .typed::after{
        content: "|";
        font-size: 150%;
        line-height: 30px;
        animation: blink .75s step-end infinite;
    }
    .bodyguards .btn { 
        background-color: green;
        margin-left:240px;
        margin-top:255px;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        display: inline-block;
        position: absolute;
        color: whitesmoke;
        opacity: 0;
    }
    .bodyguards .btn a{
        color: whitesmoke;
        text-decoration: none;
    }
    .bodyguards .btn:hover{
        background-color: rgb(0, 0, 61);
        transition: 0.2s;
    }
    @keyframes blink {
        from, to { color: transparent }
        50% { color: rgb(0, 215, 0); }
    }

    /*protocol starts*/
    .protocol{
        background-color: #f1f1f1;
    }
    .protocol .heading1{
        display: inline-block;
    }
    .protocol .heading1 #first{
        border-left-style: solid;
        border-color: rgb(0, 0, 61);
        border-width: 15px;
        margin-top: auto;
        margin-left: 10px;
        padding: 4px;
        color: green;
        display:inline-block;
        font-weight: bold;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 30px;
        /*font-weight: lighter;*/
    }
    .protocol .heading1 #next{
        display:inline-block;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-weight: bold;
        font-size: 30px;
        margin-left: 25px;
        color: rgb(0, 0, 61);
        /*font-weight: lighter;*/
    }
    .protocol img{
        display: none;
        margin-top: 20px;
    }
    .protocol .paragraph{
        margin-top: 10px;
    }
    .protocol .paragraph p br{
        display: none;
    }
    .protocol .paragraph p{
        display: inline-block;
        margin-left: 20px;
        font-size: 18px;
    }
    .protocol .btn{
        display: inline-block;
        margin-left: 10px;
    }
    .protocol .btn a{
        padding: 10px;
        border-radius: 20px;
        border-width: 1px;
        font-size: 18px;
        color: whitesmoke;
        background-color: rgb(0, 0, 61);
        text-decoration: none;
    }
    .protocol .btn a:hover{
        background-color: green;
    }
    .protocol .img{
        position: absolute;
        display: inline-block;
        right: 0px;
        top: 2350px;
    }
    .protocol .img img{
        height: 200px;
        width:400px
    }
    /*protocol ends*/

    /*cash in transit starts*/

    .cashintransit .img{
        position: absolute;
        display: inline-block;
        margin-left: 0px;
        margin-top: 50px;
    }
    .cashintransit .img img{
        height: 200px;
        width: 370px;
    }
    .cashintransit .heading1{
        position: absolute;
        display: inline-block;
    }
    .cashintransit .heading1 #first{
        border-left-style: solid;
        border-color: rgb(0, 0, 61);
        border-width: 15px;
        margin-top: auto;
        margin-left: 10px;
        padding: 4px;
        color: green;
        display:inline-block;
        font-weight: bold;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 30px;
        /*font-weight: lighter;*/
    }
    .cashintransit .heading1 #next{
        display:none;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-weight: bold;
        font-size: 30px;
        color: rgb(0, 0, 61);
        /*font-weight: lighter;*/
    }
    .cashintransit .paragraph{
        display:block;
        margin-top: 260px;
        margin-left: 20px;
        font-size: 18px;
    }
    .cashintransit .paragraph p br{
        display: none;
    }
    .cashintransit .btn{
        padding: 10px;
        border-radius: 20px;
        font-size: 18px;
        color: whitesmoke;
        background-color: rgb(0, 0, 61);
        text-decoration: none;
        position: absolute;
        margin-top: 530px;
        margin-left: 10px;
    }
    .cashintransit .btn a{
        font-size: 18px;
        text-decoration: none;
        color: whitesmoke;
    }
    .cashintransit .btn:hover{
        background-color: green;
    }
    .cashintransit .bottomspace{
        display: unset;
    }
    /*cash in transit ends*/

    /*equipments starts*/
    .securityequipments .img{
        display: inline-block;
        position: absolute;
        top:1950px;
        right: 5px;
    }
    .securityequipments .heading1 #first{
        font-size: 30px;
    }
    .securityequipments .heading1 #next{
        font-size: 30px;
    }
    .securityequipments .img img{
        display: none;
        width: 450px;
    }
    .securityequipments .paragraph{
        margin-top: 0px;
    }
    .securityequipments .paragraph p br{
        display: none;
    }
    .securityequipments .paragraph p{
        width: 85%;
        font-size: 18px;
    }
    .cards2{
        margin-left: 0px;
        align-items: center;
        background-color:#f1f1f1;
        border: none;
    }
    
    .cards2 .card{
        display: inline-block;
        /*margin-left: 25px;*/
    }
    
    .cards2 .card .flip-card {
        background-color: transparent;
        width: 180px;
        height: 190px;
        perspective: 1000px;
        border: none;
    }
      
    .cards2 .card .flip-card .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        border: none;
    }
      
    .cards2 .card .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
        border: none;
    }
      
    .cards2 .card .flip-card .flip-card-front, .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border: none;
    }
    .cards2 .card .flip-card .flip-card-front img{
        height: 80px;
    }
    .cards2 .card .flip-card .flip-card-front {
        background-color: whitesmoke;
        color:rgb(0, 0, 61);
        font-weight: bold;
        border: none;
    }
    .cards2 .card .flip-card .flip-card-front h3{
        font-size: 25px;
    }
    .cards2 .card .flip-card .flip-card-back {
        background-color: rgb(0, 0, 61);
        color: whitesmoke;
        transform: rotateY(180deg);
        border: none;
    }
    .cards2 .card .flip-card .card:hover{
        cursor: pointer;
    }
    /*equipments ends*/

    /*investigation starts*/
    .investigation .heading1{
        text-align: center;
    }
    .investigation .heading1 #first{
        margin-top: auto;
        padding: 4px;
        color: green;
        display:inline-block;
        font-weight: bold;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-size: 30px;
        /*font-weight: lighter;*/
    }
    .investigation .heading1 #next{
        display:inline-block;
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        font-weight: bold;
        font-size: 30px;
        color: rgb(0, 0, 61);
        /*font-weight: lighter;*/
    }
    
    /*Typing animation starts*/
    .investigation .autoytype3{
        margin-left: 31px; 
        display: flex;
        justify-content: left;
        align-items: left;
    }
    
    .investigation .autoytype3 .typed3 {
        line-height: 25px;
        width: 90%;
        font-size: 18px;
        text-align: left;
        color: black;
        vertical-align: text-bottom;
        position: absolute;
    }
    
    .investigation .autoytype3 .typed3::after{
        content: "|";
        font-size: 150%;
        line-height: 30px;
        animation: blink3 .75s step-end infinite;
    }
    
    @keyframes blink3 {
        from, to { color: transparent }
        50% { color: rgb(0, 0, 61); }
    }
    /*Typing animation ends*/
    
    /*finger print animation starts*/
    .investigation .mfingerp{
        display: inline-block;
        right: 180px;
        margin-top: 380px;
        position: absolute;
    }
    .investigation .mfingerp .fingerprints{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .investigation .mfingerp .fingerprints .scan{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .investigation .mfingerp .fingerprints .scan .fingerprint {
        position: relative;
        width: 200px;
        height: 270px;
        background: url("assets/fingerPrint_01.png");
        background-size: 200px;
    }
    .investigation .mfingerp .fingerprints .scan .fingerprint::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url("assets/fingerPrint_02 2.png");
        background-size: 200px;
        animation: animate 4s ease-in-out infinite;
    }
    @keyframes animate {
        0%,
        100% {
          height: 0%;
        }
        50% {
          height: 100%;
        }
    }
    .investigation .mfingerp .fingerprints .scan .fingerprint::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 8px;
        background: rgb(0, 0, 61);
        border-radius: 8px;
        filter: drop-shadow(0 0 20px #00003d) drop-shadow(0 0 60px #00003d);
        animation: animate_line 4s ease-in-out infinite;
    }
    @keyframes animate_line {
        0%,
        100% {
          top: 0%;
        }
        50% {
          top: 100%;
        }
    }
    .investigation .magnifyingg{
        position: absolute;
        right: 150px;
        margin-top: 320px;
    }
    .investigation .magnifyingg img{
        height: 250px;
    }
    .investigation .magnifyingg img{
        position: relative;
        animation-name: example;
        animation-duration: 4s;
        animation-iteration-count:infinite;
        animation-direction: alternate; 
    }
    @keyframes example {
        0%   {left:0px; top:0px;}
        0%   {left:0px; top:0px;}
        25%  {left:150px; top:0px;}
        50%  {left:150px; top:150px;}
        75%  {left:0px; top:150px;}
        100% {left:0px; top:0px;}
    }
    /*finger print animation ends*/
    .investigation .btn{
        background-color: #00003d;
        margin-left: 30px;
        margin-top: 280px;
    }
    .investigation .btn a{
        text-decoration: none;
        color:whitesmoke;
    }
    .investigation .btn:hover{
        background-color: green;
        transition: 0.2s;
    }
    /*Investiigation Services Ends*/
    /*investigatiion ends*/

    /*quick links CSS starts*/
    .quicklinks{
        background-color: black;
    }
    .quicklinks .bottomspace{
        display: none;
    }
    .quicklinks h3{
        margin-left: 110px;
        color: rgba(245, 245, 245, 0.75);
    }
    .quicklinks .mid{
        margin-left: 80px;
        text-align: center;
        display: inline-block;
    }
    .quicklinks .mid ul{
        list-style: none;
    }
    .quicklinks .mid ul li{
        margin-top: 8px;
    }
    .quicklinks .mid ul li a{
        text-decoration: none;
        color:rgba(245, 245, 245, 0.432);
        font-weight: lighter;
    }

    .quicklinks .right{
        position: relative;
        left:-45px;
        text-align: center;
        color: whitesmoke;
        display: block;
    }
    .quicklinks .right h3{
        text-align: center;
    }
    .quicklinks .right ul{
        list-style: none;
    }
    .quicklinks .right ul li{
        margin-top: 8px;
    }
    .quicklinks .right ul li a{
        text-decoration: none;
        color:rgba(245, 245, 245, 0.432);
        font-weight: lighter;
    }
    .quicklinks .mid ul li a:hover{
        color:whitesmoke;
    }
    .quicklinks .right ul li a:hover{
        color:whitesmoke;
    }
    .quicklinks .contactus{
        display:block;
        position:relative;
        align-items: center;
    }
    .quicklinks .contactus h3{
        margin-left: 220px;
        font-size: 28px;
        
    }
    .quicklinks .bottomspace{
        display: unset;
    }
    .quicklinks .contactus .links{
        margin-left: 200px;
    }
    .quicklinks .contactus .links ul{
        list-style: none;
        display: inline-block;
    }
    .quicklinks .contactus .links ul li{
        display: inline-block;
        margin-left: 3px;
    }
    .quicklinks .contactus .links ul li a img{
        height: 24px;
        filter: brightness(0.35); 
    }
    .quicklinks .contactus .links ul li a img:hover{
        filter: brightness(1.00); 
    }
    .quicklinks .contactus h4{
        margin-left: 200px;
    }
    .quicklinks .contactus #imgl{
        margin-left: 200px;
    }
    .quicklinks .contactus .links2{
        margin-left: 200px;
    }
}

/*responsiveness ends*/