h1 {
	margin: 0;
}
/*var*/

/*bread*/
.top_br {
	display: flex;
	flex-direction: column;
	font-family: Nunito Sans;
	font-size: 17px;
	font-weight: 400;
	line-height: 22px;
	text-align: left;
	max-width: 1400px;
	margin: 7% auto 0;
	padding: 40px 0;
}

.top_br hr {
	background-color: #258F67;
	border: 0;
	height: 2px;
	margin-bottom: 1.5em;
	width: 7%;
	margin-left: 0;
	transition: width 0.5s ease; 
}

.top_br_wr {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.top_br_wr a, .top_br_wr a:visited {
	color: #258F67;
	text-decoration: none;
}

.top_br_wr:hover ~ .top_br_line, .top_br_wr:hover > .top_br_line {
	width: 20%;
}


/*premium*/
.premium {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 0;
	
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.premium-left h1 {
	font-family: Nunito Sans;
font-size: 40px;
font-weight: 900;
line-height: 40px;
text-align: left;
color: var(--h1-color);
	width: 500px;
	margin-bottom: 15px;
}
.premium-left p {
	font-family: Montserrat;
font-size: 17px;
font-weight: 400;
line-height: 24px;
text-align: left;
color: var(--p-color);
	width: 500px;
	margin-bottom: 32px;
}
.premium-contact-info {
	display: flex;
	flex-direction: row;
	gap: 15px;
}
.premium-contact-info img {
	width: 65px;
}
/*why*/
.why {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 0;
}

.why-grid {
    display: grid;
  grid-template-columns: repeat(3, 1fr);
    gap: 30px;
	    width: 1000px;
	margin: 0 auto;
}

.why-h1 {
	font-family: Nunito Sans;
    text-align: center;
	color: var(--h1-color);
	width: 500px;
	    margin: 0 auto;
	margin-bottom: 58px;
}
.why-h1 span {
	color: var(--h1-y);
}
.grid-elem {
	display: flex;
	flex-direction: column;
	    gap: 10px;
}
.why-number {
   	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
    background-color: #FFE7B4;   
    padding: 10px 24px 12px;
    border-radius: 100%;
    color: #214842;
	font-weight: 800;
	
}
.num {
	margin-bottom:15px;
}
.why-large {
	font-family: Nunito Sans;
	font-size: 22px;
	font-weight: 700;
	line-height: 27px;
	text-align: left;
	color: var(--h1-color);
	margin: 0;
}
.why-small {
	font-family: Montserrat;
font-size: 17px;
font-weight: 400;
line-height: 24px;
text-align: left;
color: var(--p-color);
}
/*howtoget*/
.howtoget {
    max-width: 1400px;
    margin: 0 auto;
       padding: 40px 0 60px;	
}

.how-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px 10px;
}

.howtoget  h2 {
	font-family: Nunito Sans;
font-size: 40px;
font-weight: 900;
line-height: 40px;
text-align: left;
color: var(--h1-color);
	margin-bottom: 20px;
}
.howtoget span {
	font-family: Montserrat;
font-weight: 600;
color: var(--p-color);
}

.howtoget p, .howtoget li {
	font-family: Montserrat;
font-size: 17px;
font-weight: 400;
line-height: 24px;
text-align: left;
color: var(--p-color);
}

.how-grid-1 ol {
	width: 520px;
}
.how-grid-1 ol li {
	padding-bottom: 20px;
}
.how-grid-4 h2, .how-grid-4 p{
	padding-left: 100px;
}
.how-grid-4 ul {
		padding-left: 120px;
}
.how-grid-5 h2 {width: 380px;}
.how-grid-5-p-up {margin-bottom: 20px;}
.how-grid-5-p-dw {margin-bottom: 30px;}






/*yellow*/
.y-img-comb {display: none;}
.yellow-whole {
	max-width: 100%;    
    padding: 40px 0;
    background-color: #EFC368;
    position: relative;
    min-height: 380px;
}
.yellow-whole-block {
	    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 0;
}
.y-text h2 {
	width:450px;
	font-family: Nunito Sans;
font-size: 40px;
font-weight: 900;
line-height: 40px;
text-align: left;
color: var(--h1-color);
	margin-bottom: 40px;
}
.y-text p {
	width:700px;
font-family: Montserrat;
font-size: 24px;
font-weight: 400;
line-height: 31px;
text-align: left;

color: var(--h1-color);
}
.y-img-1 {
	position: absolute;
    top: -2%;
    right: 35%;
}
.y-img-2 {
	position: absolute;
    right: 25%;
    top: 20%;
	max-width: 270px;
}
.y-img-3 {
	position: absolute;
    bottom: 0;
    right: 10%;
	max-width: 500px;
}


/*faq*/
.whole-faq {
		    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 0;
}
.whole-faq h2, .whole-faq-p {
	text-align: center;
}
.whole-faq h2 {
	font-family: Nunito Sans;
font-size: 36px;
font-weight: 800;
line-height: 44px;
text-align: center;
color: var(--h1-color);
margin-bottom:56px;
}
.whole-faq-p {
	margin: 0 auto;
	width:800px;
	font-family: Montserrat;
font-size: 17px;
font-weight: 600;
line-height: 24px;
text-align: left;
color: var(--p-color);
}

/*1525*/
@media (max-width: 1525px) {
	.header-main-navigation, .top_br, .premium, .why, .howtoget, .yellow-whole-block, .whole-faq {
		width:80%;
	}	
	.how-grid-4 h2, .how-grid-4 p {
    padding-left: 40px;
}
	.how-grid-4 ul {
    padding-left: 80px;
}
}


/*1400*/
@media (max-width: 1400px) {

	.top_br {	
		    margin-top: 10%;
	}
	.y-img-3 {
    width: 30%;
	}	
	
	.ftr-1 {
		justify-content: flex-start;
	}
	.menu-search {
		margin: 5px 0;
	}
}

/*1200*/
@media (max-width: 1200px) {	


}

	/*800 mob*/
@media (max-width: 800px) {
	.header-main-navigation, .top_br, .premium, .why, .howtoget, .yellow-whole-block, .whole-faq {
		width:90%;
		padding: 30px 0;
	}
	.top_br {
		display: none;
	}

	.premium {
		flex-direction: column-reverse;
		    align-items: center;
		margin-top:20%;
		  
	}
	.premium-left {
		    margin-top: 33px;
	}
	.premium-contact-info {

    justify-content: center;
}
	
	.why-grid {   
    grid-template-columns: repeat(1, 1fr);    
    width: 90%;
	}
.how-grid {
        display: grid;
        grid-template-columns: 1fr; 
        grid-template-areas: 
            "how-grid-2"
            "how-grid-1"
            "how-grid-3"
            "how-grid-4"
            "how-grid-6"
            "how-grid-5";
        gap: 20px;
    }   
    .how-grid-1 { grid-area: how-grid-1; }
    .how-grid-2 { grid-area: how-grid-2; }
    .how-grid-3 { grid-area: how-grid-3; }
    .how-grid-4 { grid-area: how-grid-4; }
    .how-grid-5 { grid-area: how-grid-5; }
    .how-grid-6 { grid-area: how-grid-6; }
	.how-grid-1, .how-grid-2, .how-grid-3, .how-grid-4, .how-grid-5, .how-grid-6 {
		width:100%;
	}
.how-grid-5 h2 {
     width: 100%; 
}
	.how-grid img {
		width:100%;
	}
	.how-grid-4 h2, .how-grid-4 p{
    padding-left: 0px;
}
	.how-grid-4 ul {
    padding-left: 40px;
}
	.whole-faq-p {    
    width: 100%;
	}
	
	.how-grid-1 ol {
     width: 80%; 
}
	
	.yellow-whole {   
    padding: 0 0 40px 0;
	}
	.yellow-whole-block {
		padding: 0;
	}
	.y-img-1, .y-img-2, .y-img-3 {
		display: none;
	}
	.y-img-comb {
		display: block; 
		width: 100%;
	}
	/*800 Fonts*/
	
	.premium-left h1 {		
		font-size: 24px;
		font-weight: 900;
		line-height: 25px;
		text-align: center;
		width:100%;
	}
	.premium-left p {
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		text-align: center;
		width:100%;
	}
	.why-h1 {
		font-family: Nunito Sans;
		font-size: 24px;
		font-weight: 800;
		line-height: 25px;
		text-align: center;
		width: 240px;
		margin-bottom: 23px;
		width:40%;
	}
	
	.howtoget h1 {	
font-family: Nunito Sans;
font-size: 24px;
font-weight: 900;
line-height: 25px;
text-align: left;

	}
	.howtoget p, .howtoget li {
		font-family: Montserrat;
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-align: left;

	}

	.y-text h2, .y-text p  {
		width: 100%;
		text-align: center;			
	}
	.y-text h2 {
		font-family: Nunito Sans;
font-size: 24px;
font-weight: 900;
line-height: 25px;
		    margin-bottom: 20px;
	}
	.y-text p  {
	font-family: Montserrat;
font-size: 14px;
font-weight: 400;
line-height: 20px;	
	}

	.whole-faq h2 {
		font-family: Nunito Sans;
		font-size: 24px;
		font-weight: 800;
		line-height: 44px;
		text-align: center;

	}
	.whole-faq-p {
		font-family: Montserrat;
font-size: 14px;
font-weight: 600;
line-height: 20px;
text-align: left;

	}

	 

}

/*600 mob*/
@media (max-width: 600px) {
.premium {
		margin-top:30%;		  
	}
	.why-h1 {

		width:50%;
	}
}

@media (max-width: 400px) {
.premium {

		margin-top:40%;
		  
	}
		.why-h1 {

		width:60%;
	}
}