body{font-family: 'Amaranth', sans-serif;background-color: #2c3e50;}
p{font-size: 18px;}
:root{
    --main-color:#c00808;
}
/* *********Navbar************** */
 nav{background-color: var(--main-color) !important;}
.navbar-brand{margin-left: 4%;font-weight: bold;color: #fff!important;font-size: 30px;font-family: 'Girassol', cursive;} 
.navbar-brand span{color: #2f3542;}
.navbar-nav .nav-link{color: #fff!important;margin-left: 25px;font-size: 19px;transition: 1s;}
.navbar-nav .nav-link:hover{color: #2f3542!important;}
 nav ul{padding-right: 20px !important;}
/* ***********Start Header************************* */
header{position: relative;}
.custom-shape-divider-top-1620426075 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    background-color: transparent;
}

.custom-shape-divider-top-1620426075 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
    background-color: transparent;
}

.custom-shape-divider-top-1620426075 .shape-fill {
    fill: var(--main-color);
}
/* ***********Start About*********************** */
.about{padding: 100px 0;}
.about .intro{margin-top: 30px;}
.about h1 ,.about h4 , h2{color: #fff;}
.about h1 span,h2 span{color: var(--main-color);}
.about p{color: #fff;}
.about img{width: 45%;border-radius: 50%;margin-top: 20px;box-shadow: 0px 0px 5px 2px var(--main-color);}
.about .box h3{color: #2f3542; font-size: 20px;} .about .box h3.name{color: var(--main-color);}
.about .box{background-color: #fff;text-align: center;width: 60%;
    padding: 33px 0;margin: auto;box-shadow: 0px 0px 3px var(--main-color)}
.about .social-media{background-color: var(--main-color);padding: 5px 0;position: relative;top: 33px;}
.social-media i{color: #fff;font-size: 23px;margin-left: 20px;}   
 /***************My Info***************************/
 .my-info h3{color: #fff; margin-bottom: 30px;text-align: center;}
 .my-info h2{margin-bottom: 60px}
 .my-info p{color: #fff;}
 .my-info .information p{margin: 35px;border-bottom: 1px solid #4a5855;width: fit-content;padding: 5px;}
 .my-info span{color: var(--main-color);}.information i{color: #fff;margin-right: 5px;}
.my-info .progress-bar{background-color: var(--main-color);transition:width 1.5s linear;}
.progress{height: .8rem;border-radius: .30rem;}
/* ***************Experianece*********************** */
.exper{margin: 100px 0;}
.exper p{color: #fff; margin: 50px 0;line-height: 1.8;}
.exper button.btn-primary{background-color: var(--main-color);border: none;}
.exper button a{color: #fff;text-decoration: none;}
/* ***************Feature work*******************/
.work{padding:80px 0;}
.work h2{margin-bottom: 40px;}
.work p{color: #fff;}
.work img{width: 100%;margin-top: -30px;}
.work span i{color: var(--main-color);font-size: 25px;}
/* **************Portfolio************************ */
.port img{width:80%;height: 280px; margin-bottom: 20px;transition: all ease-in-out 1s;}
.port h2{margin-bottom: 70px;}
.port .image{position: relative;opacity: 1;cursor: pointer;}
.port .image:hover img{opacity: 0.4;transform: scale(1.1);}
.port button{background-color: transparent;padding: 5px 20px;border:none;
     border:2px solid var(--main-color);position: absolute;top: 37%;left: 36%;opacity: 0;transition: all ease-in-out 1s;}
.port button a{text-decoration: none;color: #fff;}
.port p{color: #fff;}
.port .image:hover button{opacity: 1;}
/***************Footer*********************/
.footer{background-color: var(--main-color); padding-top: 50px;margin-top:100px;}
.footer p,.footer span{color: #fff; font-size: 17px;}
.footer .social-media{padding: 40px;}
.footer .social-media i{color: #000000;}
.footer .social-media i:hover{color: #fff;}
.copy-right{
    background-color: #2c3e50;
    color: #eee;
    padding-top: 10px;
    font-size: 17px;
    border-top: 2px var(--main-color) solid;
}
.copy-right span{color: var(--main-color);}
/*Start Scroll To Top*/
#scroll-top{
	width: 50px;
	height: 50px;
	color: aliceblue;
	text-align: center;
	border: 2px solid #fff;
	position: fixed;
	right: 15px;
	bottom: 10px;
	z-index: 99999;
	display: none;
	cursor: pointer;
}
#scroll-top i{font-size: 29px;color: #fff;margin-top: 8px;}

@media(max-width:992px){
    .about .box{width: 100%;margin: 0%;}
    .work{overflow-x: hidden !important;}
    .my-info .information{margin-bottom: 50px;}
    .my-info .information p {margin: 0px;}
    nav{padding: 0.5rem 1rem 0rem !important; }
    .work img{width: 100%;margin-top: 0px;}
    .port img{height: auto;}
    }