/*
Theme Name: npcoding-os
Theme URI: https://npcoding.com
Description: Wordpress theme for npcoding-os
Author: Monjurul Hoque
Author URI: https://monjurulhoque.com
Version: 1.0
Tested up to: 6.3
Requires at least: 3.0
Requires PHP: 5.2.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: npcoding-os
Text Domain: npcoding-os
*/
/*
@media (min-width: 1200px) {
  .container {
    max-width: 1250px;
  }
}
*/

html {
  scroll-behavior: smooth;
}

.active_header{
    padding-top: 120px !important;
}


.hero_main .btn{
	/*
    padding: 16px 150px 21px 150px;
    */
}


.middle_logo img{
    max-width: 150px;
}

.small_title{
    font-size: 46px;
}

h2.subtitle{
    font-family: Assistant;
    font-size: 26px;
    font-weight: 100;
    line-height: 30px;
}

.about_block .block_div_1 {
  width: 75px;
  height: 8px;
  position: absolute;
  
  object-fit: contain;
    
    right: -15px;
  top: 155px;
  
}

.about_block .block_div_2 {
  width: 75px;
  height: 8px;
  position: absolute;
  
  object-fit: contain;
    
    right: 400px;
  top: 155px;
  
}

.about_block{
    min-width: 1250px;
}


.bottom-form .btn{
    
    font-family: Assistant;
    font-size: 40px;
    font-weight: 600;
    line-height: 53px;
    letter-spacing: 0em;
    text-align: center;
}

.wpcf7-response-output{
    color: red;
    border: none !important;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
}

.wpcf7-spinner {
  top: -55px;
  left: -65px;
    background-color: orange !important;
}

hr.w50{
    width: 50px;
    display: inline-block;
    margin: 0;
    padding: 0;
    border: solid 2px #0D1825;
}

hr.w50.white{
    width: 50px;
    display: inline-block;
    margin: 0;
    padding: 0;
    border: solid 2px #FFFFFF;
}

hr.w50.blue{
    width: 50px;
    display: inline-block;
    margin: 0;
    padding: 0;
    border: solid 2px #105379;
}



.about-us .card{
    
    width: 400px;
    height: 445px;
    padding: 15px;    
    border-radius: 15px;
    display: inline-block;
   
}


.card-title{
    margin-bottom: 0;
    font-family: Assistant;
font-size: 35px;
font-weight: 700;
line-height: 46px;
letter-spacing: 0em;
text-align: center;

    
}
.card-sub-title{
    font-family: Assistant;
font-size: 14px;
font-weight: 600;
line-height: 18px;
letter-spacing: 0em;
text-align: center;

}
.card-sub-title span{
    font-family: Assistant;
font-size: 47px;
font-weight: 800;
line-height: 61px;
letter-spacing: 0em;
text-align: center;
    color: #FF4E00;


}

.card-list{
    margin-left: 50px;
}

.card-list li{
font-family: Assistant;
font-size: 21px;
font-weight: 400;
line-height: 29px;
letter-spacing: 0em;
text-align: left;
    color: #0D1825;
    

}

.card-list .list-none{
    list-style: none !important;
}

.card_btn{
    
    
}


.title_underline{ 
    text-decoration: underline; 
    text-decoration-color: #FF4E00; 
}

.about-bottom h2{
    font-size: 21px;
}


.upsell-button.about .btn::before {
  content: url('images/about_bef.png');
  position: absolute;
  left: -70px;
  top: -80px;
  pointer-events: none;
}

.upsell-button.about .btn::after {
  content: url('images/about_aft.png');
  position: absolute;
  right: -70px;
  top: -80px;
  pointer-events: none;
}

.review-logos .review-parent{
    padding-bottom: 20px;
}



/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
    .block_div_1, .block_div_2{
        display: none !important;
        visibility: hidden !important;
    }
    
    .about_block{
        min-width: auto;
    }
    .block{
            width: auto;
        }
	
}



/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
    
    .card-title{
    	font-size: 28px;
        line-height: 30px;
    }
    
    .about-us ul li{
    	line-height: 25px;
    }
    
    .hero_main .btn .btnmain{
        font-size: 28px;
    }
    
    .hero-section h2, .section-head h2, .experts .section-head h2, .bottom-form .section-head h2{
        font-size: 28px;
        line-height: 30px;
        font-weight: 600;
    }
    
    
    .upsell-button{
        padding-bottom: 30px;
    }
    .top-video-section .video-content p{
        font-size: 24px;
        line-height: 28px;
    }
    
    .top-video-section{
        
    }
    .btn{
        width: 100%;
    }
    
    .block_div_1, .block_div_2{
        display: none !important;
        visibility: hidden !important;
    }
    
    .about-us .card{
        width: auto;
        padding: 20px;
    }
    
    .card-list .list-none{
        display: none;
        visibility: hidden;
    }
    
    .block{
        width: auto;
        
    }
    
    .circle{ padding: 0 10px;}
    
    .features .feat{
        padding-top: 50px;
    }
    .experts-content{
        margin-bottom: 50px;
    }
    
    .about_block{
        min-width: auto;
    }
    
    .small_title{
        font-size: 24px;
    }
    .hero-section h2 .color{
        font-size: 46px;
    }
    #counter {
        padding-top: 50px;
    }
    
    .about_sub_title{
        font-size: 24px;
        line-height:30px;
    }
    
    .about-us .section-head h2{
        text-align: center;
    }
    
    .review-parent{
        max-width: 150px;
        display: inline-block;
        min-height: 150px;
        padding-bottom: 0px;
    }
    
    .active_header{
        padding-top: 100px !important;
    }
    
    h2.subtitle{
        font-size: 18px;
    }
    
    
}



/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	.block_div_1, .block_div_2{
        display: none !important;
        visibility: hidden !important;
    }
    
    .about_block{
        min-width: auto;
    }
    
    

}


/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
	
        /*
        .block_div_1, .block_div_2{
        display: none !important;
        visibility: hidden !important;
    }
        
    .about_block{
        min-width: auto;
    }
        
        
        .block{
            width: auto;
        }
	*/
}