@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap');

body {
	background-image: linear-gradient(#B8E7FA, #E6E6FA);
	margin: 0;
}

/* body font family  */
.azeret-mono-normal {
  font-family: "Azeret Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
/* nav bar styles starts here  */
.hero-nav-container{
	background-image: linear-gradient(#FFFFFF, #C6DBFF);
	margin-bottom: 60px;
}
.hero-nav-content{

	width: 80%;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* justify-items: center; */
	margin: 0 auto;
	display: flex;
    justify-content: space-between;
    align-items: center;
	/* justify-content: center; */
}
.io-yellow{
	color: #FFA500;
}

/* all button style start here  */
.nav-btn:hover{
	background: black;
}
.nav-btn{
	 width: 208px;
    height: 66px;
    /* margin-top: 60px; */
	text-decoration: none;

    border-radius: 8px;
    background-image: linear-gradient(#FFA500, #FFD447);

    color: #0D1321;
    font-family: Azeret Mono;
    font-size: 15px;
    font-weight: 600;
    border: none;
	cursor: pointer;
}
.nav-btn a{
	text-decoration: none;
}

.hero-btn{
    width: 208px;
    height: 66px;
    margin-top: 60px;
    color: #0D1321;
    border-radius: 8px;
    background-image: linear-gradient(#FFA500, #FFD447);
    font-family: Azeret Mono;
    font-size: 15px;
    font-weight: 600;
    border: none;
	cursor: pointer;
}
.hero-btn:hover{
	background: black;
}
.hero-btn a{
    /* color: #0D1321; */
    text-decoration: none;
}

.change-the-world-text button{
	border: none;
    width: 208px;
    height: 66px;
    margin-top: 60px;
    border-radius: 8px;
    background-image: linear-gradient(#FFA500, #FFD447);
	color: #0D1321;
    font-family: Azeret Mono;
    font-size: 15px;
    font-weight: 600;
	cursor: pointer;
}
.change-the-world-text button:hover{
	background: black;
	color: #0D1321;
}

/* all button style end here  */

/* hero container starts here  */
.hero-container{
    max-width: 80%;
    height: 652px;
    /* border: 2px solid ; */
	background-image: linear-gradient(#EBF2FF, #E1E8FF);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	margin: 0 auto;
	border-radius: 16px;
	margin-bottom: 60px;
}
.hero-content{
    /* border: 2px solid; */
    width: 998px;
    height: 582px;
    margin: 0 auto;
    /* margin-top: 24px; */
    
    /* display: flex;
    flex-direction: row; */

}
.hero-text-content{
    /* border: 2px solid; */
    width: 85%;
    height: 310px;
    margin: 0 auto;

    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;


}
.hero-image{
    display: flex;
    width: 240.28px;
    height: 240px;
    margin: 0 auto;
}

/* my-inspiration-section-container styles starts here  */
.my-inspiration-section-container{
    /* border: 2px solid; */
    width: 1140px;
    height: 775px;
    margin: 0 auto;
    margin-top: 100px;
    /* display: flex; */
}
.my-inspiration-text-content{
    width: 70%;
    margin: 0 auto;
    text-align: center;
    /* height: 100px;

    margin-bottom: 80px; */

    /* margin-bottom: 200px; */
}
.my-inspiration-text-content h4{
    color: rgb(13, 19, 33);
    font-family: Azeret Mono;
    font-size: 28px;
    font-weight: 800;

    margin-top: 10px;
}
.my-inspiration-text-content p{
    color: rgb(13, 19, 33);
    font-family: Azeret Mono;
    font-size: 16px;
    font-weight: 400;

    margin-bottom: 47px;
}
.my-inspiration-video{
    border-radius: 16px;
    width: 100%;
    height: 600px;
    /* height: 100%; */
    margin: 0 auto;
    border: 1px solid rgba(13, 19, 33, 0.2);
    justify-content: center;
    display: flex;
    align-items: center;

    box-sizing: border-box;



}
.my-inspiration-video iframe{
    border-radius: 16px;
   

}

/* my-current-target-container styles starts here  */

.my-current-target-container{
    /* border: 2px solid; */
    width: 1140px;
    height: 550px;
    margin: 0 auto;
    margin-top: 100px;

}

.current-target-heading {
    width: 70%;
    margin: 0 auto;
    height: 113px;

    text-align: center; 
    align-items: center;
    display: flex;
    flex-direction: column;

    margin-bottom: 60px;


}
.current-target-heading h3{
    color: rgb(13, 19, 33);
    font-family: Azeret Mono;
    font-size: 28px;
    font-weight: 800;


}
.current-target-heading p {
    opacity: 0.7;


}
.current-target-content-container{
    display: flex;
    margin-top: 500px;
    width: 80%;
    margin: 0 auto;
    /* padding: 40px 30px 40px 30px; */
    height: 300px;
    gap: 100px;


}
.current-target-content{

    width: 400px;
    /* border: 2px solid; */
    padding: 8px 20px;
    height: 200px;
    /* display: block; */
    /* margin-bottom: 200px; */
	background-image: linear-gradient(#E6EDF9, #9DE5FF);
    display: flexbox;
    margin-top: 10px;
	border-radius: 16px;

}

/* why web development container styles starts here  */
.why-web-dev-grand-contaienr{
	justify-content: space-between;
    width: 80%;
    height: 500px;
    /* border: 2px solid; */
    margin: 0 auto;
    margin-top: 100px;

    border-radius: 16px;
    background-image: linear-gradient(#EBF2FF, #E1E8FF);
    display: flex;
}
.why-web-dev-content{
    width: 100%;
    /* height: 1235px; */
    /* border: 2px solid; */
    margin: 0 auto;

    margin-top: 90px;

}
.why-web-dev-heading{
    width: 50%;
    /* height: 100px; */
    text-align: center;
    margin: 0 auto;
	margin-top: 20px;
    /* margin-bottom: 120px; */
    
}
.why-web-dev-heading h2{
    width: 90%;
	/* margin-top: 20px; */
    /* margin-bottom: 20px; */
}
.change-the-world-container{
    width: 850px;
    height: 140px;
    /* border: 2px solid; */
    margin: 0 auto;

    margin-bottom: 110px;
    display: flex;
    gap: 120px;

    border-radius: 16px;

    
}


.change-the-world-container-second{
    width: 850px;
    height: 240px;
    /* border: 2px solid; */
    margin: 0 auto;

    border-radius: 16px;
    background: linear-gradient(90.00deg, rgb(255, 255, 255),rgba(255, 255, 255, 0) 100%);
}
.change-the-world-text{
    width: 50%;
}
.change-the-world-text p{
    margin-top: 33px;
    color: rgb(13, 19, 33);
    font-family: Azeret Mono;
    font-size: 16px;
    font-weight: 400;
}
.change-the-world-text h4{
    color: rgba(13, 19, 33, 0.7);
    font-family: Azeret Mono;
    font-size: 20px;
    font-weight: 700;
}
.change-the-world-image{
    width: 40%;
}

/* footer section styles starts here  */
footer{
    width: 100%;
    height: 100px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border-radius: 16px;
    background: rgba(13, 19, 33, 0.03);

    margin-top: 80px;


}
footer ul{
    display: flex;
    margin-right: 99px;
}
footer h5{
    color: rgb(13, 19, 33);
    font-family: Azeret Mono;
    font-size: 15px;
    font-weight: 600;

    margin-left: 110px;
}
footer ul li{
    list-style: none;
}
footer ul li a{
    margin-right: 22px;
}
footer ul li img{
    width: 36px;
    height: 36px;
}