/* CSS Document */
@charset "utf-8";

 

*{
margin: 0;
padding: 0;
list-style:none;
text-decoration: none;
box-sizing:border-box;
}


/*start custom class */
.test{
border:1px solid lime;
}
.test2{
border:1px solid red;
}
.my-bg1{
background-color:#6D0EB1;
}
.my-bg2{
background-image: linear-gradient( 105.7deg,  rgba(0,238,179,1) 23.2%, rgba(49,100,255,1) 100.5% );
}
.my-bg3{
background-color:#00FF7F;
}
.my-bg-skin{
background-color:#F08080;
}
.my-bg-red{
background-color:#FF0000;
}
.my-bg-brown{
background-color:#B22222;
}
.my-bg-black{
background-color:#000016;
}
.my-bg-g1{
background-image: linear-gradient( 105.5deg,#537895,#09203F);
}
.text-white{
color: White;
}
.text-black{
color: black;
}
.text-yellow{
color:#1E90FF;
}
.text-orange{
color:orange;
}
.text-grey{
color:#F8F8FF;
}
.text-shadow{
 text-shadow:0px 0px 1px black;
}
.zero-shadow{
 box-shadow:0px 0px 3px black;
}
.small-text{
 font-size:15px;
 font-weight:400;
 color:rgba(0,0,0,0.7);
}
.small-text-white{
 font-size:15px;
 font-weight:400;
 color:rgba(255,255,255,0.9);
}
.header-text{
 font-size:25px;
 font-weight:400;
 letter-spacing:1px;
 color:#000;
}
.border-line{
 width:130px;
 height:5px;
 border-radius:5px;
 opacity:0.5;
 box-shadow:0px 0px 2px black;
 background-image: linear-gradient( 105.7deg,  rgba(0,238,179,1) 23.2%, rgba(49,100,255,1) 100.5% );
}
.page-btn{
 border-radius:19px;
 letter-spacing:1px;
 color:white;
 box-shadow:0px 1px 3px rgba(0,0,0,0.5);
}
.bold-header{
 font-size:25px;
 line-height:35px;
 font-weight:bold;
}
body::-webkit-scrollbar{
  width:5px;
}
body::-webkit-scrollbar-track{
  background: black;
}
body::-webkit-scrollbar-thumb{
  background:yellow;
  border-radius:3px;
}
.gf_ms{
font-family: 'Montserrat', sans-serif;
}
.gf_rc{
font-family: 'Righteous', cursive;
}
.gf_rs{
font-family: 'Roboto', sans-serif;
}
.gf_twc{
font-family: 'Trade Winds', cursive;
}

/*end custom class */




/*start desktop nav bar coding*/
.desktop-navbar{
   width:100%;
   float: left;
   position: relative;
   border:0px solid red;
}
.desktop_menu{
  width: 100%;
  height:80px;
  float: left;
  font-size:22px;
  list-style: none;
  box-sizing: border-box;
  padding:15px 25px 15px 25px;
  background:white;
  display:block;
  position:relative;
  top:0;
  z-index:5000;
  border:0px solid red;
  transition:0.5s;
  }
  .fixed{
  /*note:- yo class name hamile dynamically add garne xau*/
  transition:0.5s;
  height:80px;
  position:fixed;
  top:0;
  left: 0;
  z-index:5000;
  background:white;
  padding:20px 40px 20px 0px;
  box-shadow: 0px 5px 20px rgba(0,0,0,0.3); 
  }
  #menu-brand-logo{
    width:150px;
    height:80px;
    position: absolute;
    top:0px;
    left:40px;
    z-index: 10000;
    background:url(../images/sq-logo1.png);
    background-size:cover;

    border:0px solid red;
    display:none;
    cursor: pointer;
  }
  .desktop_menu li{
  cursor: pointer;
  }
  .desktop_menu #top_right_menu{
  border:0px solid blue;
  float:right;
  }
  
  .desktop_menu #top_right_menu li{
  display: inline-block;
  padding:10px 6px;
  box-sizing: border-box;
  border-radius: 1px;
  margin: 0px 10px;

  }
  .desktop_menu #top_right_menu li .color{
  color:#e91e63;
  font-family: 'Righteous', cursive;
  letter-spacing:1px;
  text-shadow: 0px 0px 1px black;
  text-decoration: none;
  }
  .desktop_menu #top_right_menu li:hover{
  border-bottom:3px solid yellow;
  }
  .desktop_menu #top_right_menu li:hover a{
  color:cyan;
  transition: 0.5s;
  }
  .c-li{
    border-bottom:3px solid yellow;
  }


/*end desktop nav bar coding*/

/*start desktop dropdown menu*/
 .drop-menu1{
  width:100%;
  position:absolute;
  top:80px;
  left:0px;
  z-index:1;
  display: none;
  box-shadow:0px 14px 18px rgba(0,0,0,0.2);
 }
 .drop-menu1-add{
  position:absolute;
  top:80px;
 }
 
 
 .drop-menu2{
  width:100%;
  position:absolute;
  top:80px;
  left:0px;
  z-index:1;
  display:none;
  box-shadow:0px 14px 18px rgba(0,0,0,0.2);
 }
 .drop-menu2-add{
  position:absolute;
  top:80px;
 }

 #ao{
  position: relative;
 }
 .drop-ul{
  padding:20px;
  min-width:400px;
 }
 .drop-ul li a{
   width: 100%;
   display: block;
   padding:15px 12px;
   list-style: none;
   background:#ff0e60;
   line-height:10px;
   color:white;
   text-decoration: none;
   font-size: 16px;
   letter-spacing: 1px;
   margin-bottom:16px;
   border-radius:8px;
   font-family: 'Righteous', cursive;
   border-bottom:3px solid rgba(0,0,0,0.5);
   text-shadow: 0px 1px 2px rgba(0,0,0,0.5);
 }
 .drop-ul li a:hover{
  transition: 0.4s;
  background:black;
  color:white;
  border:2px solid white;
 }
 .drop-close1{
    padding:10px;
    font-size:50px;
    background: white;
    color: red;
    border-radius: 10px;
    text-shadow: 0px 0px 1px black;
    box-shadow:0px 6px 12px rgba(0,0,0,0.5);
    cursor: pointer;
 }
 .drop-close1:hover{
  box-shadow:0px 0px 3px black;
 }

 .drop-close2{
    padding:10px;
    font-size:50px;
    background: white;
    color: red;
    border-radius: 10px;
    text-shadow: 0px 0px 1px black;
    box-shadow:0px 6px 12px rgba(0,0,0,0.5);
    cursor: pointer;
 }
 .drop-close2:hover{
  box-shadow:0px 0px 3px black;
 }
 
/*end desktop dropdown menu*/










/*start main footer section coding*/
.footer-header {
 font-size:20px;
 font-weight:400;
 letter-spacing:1px;
 color:rgba(255,255,255,0.6);
}

.footer-line{
 font-size:14px;
 font-weight:400;
 color:rgba(255,255,255,0.6);
 text-decoration: none;
}
.bottom-links a{
  letter-spacing: 1px;
}
.hover .footer-line:hover{
 transition:0.1s;
 color:#1E90FF;
 text-decoration: none;
}
.footer-image{
 width:70px;
 height:70px;
 box-sizing: border-box;
 background-color:white;
 border-radius:50%;
}
.footer-image img{
 width:100%;
 height:100%;
 border:3px solid white;
 border-radius:50%;
}
#footer-call-icon{
 font-size:40px;
}
.bottom-links i{
 font-size:18px;
}
.my-name{
  margin-left:45px;
}
/*end main footer section coding*/









/*start scroll to top functionality*/
 .scroll-top{
  position: fixed;
  bottom:40px;
  right:20px;
  z-index:10000;
  background-color:teal;
  border-radius:50%;
  font-weight:bold;
  display:none;
  box-shadow:0px 0px 4px black;
 }
 .scroll-top-btn{
  width:50px;
  height:50px;
  color: white;
  font-size:10px;
  border-radius:50%;
 }
/*end scroll to top functionality*/


/*start style_switcher for call us animation */
#switcher_slider{
height:42px;
box-sizing:border-box;
position:fixed;
bottom:45px;
right:-1px;
z-index:10000;
cursor: pointer;
}
#switcher_slider #slider-btn{
width:45px;
height:42px;
float:right;
text-align:center;
padding-top:8px;
background: white;
box-sizing:border-box;
box-shadow: inset 0px 0px 2px red;
}
#item-container{
 float:right;
 background:white;
 width:0px;
 height:100%;
 color:black;
 overflow: hidden;
 text-align: center;
 transition: all 400ms linear;
}
#call-no{
 display: block;
 color:black;
 font-size:18px;
 text-shadow:0px 0px 2px black;
}
#call-profile-pic{
width:35px;
height:35px;
border-radius:10%;
border:1px solid white;
box-shadow:0px 0px 3px black;
background-image:url(../images/sushil.jpg);
background-size:100% 100%;
}
/*end style_switcher for call us animation */



/*start mobile-nav coding*/
#mobile-nav{
width:100%;
display:none;
background: yellow;
} 
/*end mobile-nav coding*/


/*start table and mobile responsive coding*/
@media(max-width:1024px)
{    
       .desktop-navbar{
        display: none;
       }
       #mobile-nav{
       width:100%;
       height:55px;
       display:block;
       z-index:100000;
       border:0px solid red;
       } 
       
       .m-logo{
       width:150px;
       height:100%;
       background:url(../images/sq-logo1.png);
       background-size:100% 100%;
       }
       /*start mobile nav bar */
       #mobile-brand-name{
        position: absolute;
        top:8px;
        left:20px;
        font-size:25px;
        text-shadow:0px 0px 1px black;
       }
       #mobile-header{
       width:100%;
       height:100%;
       background:white;
       }
       #slide-btn-icon{
        width:40px;
        position: absolute;
        top:8px;
        right:8px;
       }
       #slide-btn-icon span{
        background:red;
        width: 100%;
        height:5px;
        margin:6px 0px;
        display: block;
        border-top-right-radius:8px;
        border-bottom-left-radius:8px;
       }
       #slide-menu{
       display: block;
       position:fixed;
       top:0px;
       left:-100%;
       z-index:6000;
       width:100%;
       height:100vh;
       background:black;
       overflow:scroll;
       transition: 0.5s;
       }
       /*Imp_note:- here hamile active class name lae JavaScript ko dabadama add gardaixau,
       so here hamile #slide-menu element ma active class add gardaixau the reason hamile #slide-menu.active define gareko xau so there cannot be space between #slide-menu and .active class name it should be #slide-menu.active*/
       #slide-menu.active{
       left:0;
       }
       .effect{
       display: none;
       }
       #mobile-items-cont{
       width:100%;
       height:100%;
       box-sizing:border-box;
       position: relative;
       }
      .menu-ul{
       margin-bottom:50px;
       padding-top:20px;
       padding-left:20px;
       padding-right:20px;
       padding-bottom:10px;
       }
       #close-btn{
       color:white;
       float: right;
       font-size:20px;
       }
       .menu-ul li{
       list-style: none;
       text-align:left;
       transition:0.3s;
       display:block;
       padding-left:10px;
       margin-bottom:15px;
       border-left:2px solid rgba(255,255,255,0.2);
       }
      .menu-ul li>a{
      display: block;
      padding-top:10px;
      padding-bottom:10px;
      text-decoration: none;
      font-size:18px;
     font-family: 'Trade Winds', cursive;
      color:#fff;
      font-weight:300;
      letter-spacing:1px;
      transition:0.3s;
      }
       #subject-cont1{
        display:none;
        width:100%;
        padding-left:20px;
       }
       #subject-cont2{
       display:none;
       width:100%;
       padding-left:20px;
       }
       #pc-services{
       position: relative;
       }
       #bs-services{
        position: relative;
       }
       /*end mobile nav bar */
       
       /*start mobile slide menu drop-down items */
       #subject-cont1>a{
       width: 100%;
       display:block;
       font-size:14px;
       padding:10px 40px;
       color:red;
       font-weight:300;
       font-family: 'Trade Winds', cursive;
       }
       #subject-cont2>a{
       width: 100%;
       display: block;
       font-size:14px;
       padding:10px 40px;
       color:red;
       font-weight:300;
       font-family: 'Trade Winds', cursive;
       }
       /*end mobile slide menu drop-down items */
       

     /*start menu advertising carousel */
     #advertise-cont{
     width:100%;
     height:130px;
     background: black;
     border-top:3px solid white;
     }
     .add-header-pro,
     .add-header-two-pro,
     .add-header-three-pro,
     .add-header-four-pro{
     font-family: 'Righteous', cursive;
     font-size:18px;
     letter-spacing:1px;
     }
     .add-dec-pro{
     font-size:13px;
     font-family:"PT Sans Caption",sans-serif;
     word-spacing:2px;
     }
     
     /*start mobile menu advertising carousel */
     #advertise-slider .carousel-indicators{
     bottom:-35px;
     display:none;
     }
     #advertise-slider .carousel-indicators li.active{
     background-color: orange;
     }
     /*end mobile menu advertising carousel */
     
     /*start socila media icon in Mobile slider menu*/
     #slider-social-cont{
      width:200px;
     }
     #slider-social-cont a{
       width:40px;
       height:40px;
       background:#AD1457;
       display: grid;
       color:white;
       place-content: center;
       text-decoration:none;
       border-radius:50%;
       font-size:20px;
       border:2px solid white;
      font-family: 'Montserrat', sans-serif;
       text-shadow:0px 0px 1px black;
     }
     #slider-social-cont>a:hover{
       color: black;
       background:#00E5FF;
       position: relative;
       transition:0.8s;
       transform:rotate(360deg);
     }
    /*end socila media icon in Mobile slider menu*/

    /*start subscription form design   */
    .subscription-form-cont{
    width:180px;
    height:180px;
    padding:11px;
    }
   /*end subscription form design   */
   .my-name{
     margin-left:30px;
    }
}





/*start only mobile and portrait view */
@media(max-width:480px)
{    

    #advertise-cont{
    margin-bottom:5px;
    }
}
/*end only mobile and portrait view */



.menu-ul li a:hover{
animation: text-a 2s linear infinite;
}
@keyframes text-a{
0%{color:White;}
50%{color:red;}
100%{color:white;}
}


.menu-ul li:hover{
 transition:0.5s;
 border:none;
 border-left:8px solid white;
}

.menu-ul #subject-cont1 a:hover{
 transition:0.5s;
 color:white;
 text-decoration: none;
 border-left:3px solid white;
}
.menu-ul #subject-cont2 a:hover{
 transition:0.5s;
 color:white;
 text-decoration: none;
 border-left:3px solid white;
}