@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');
:root{
    --header-height: 4rem;

    --color-0: red;
    --color-1: black;
    --color-3: white;
    --rotate: rotate(35deg);
    --border: 30px;

    /* ------ margin/padding------- */
    --pm-1: .5rem;
    --pm-2: 1rem;
    --pm-3: 1.5rem;
    --pm-4: 2rem;
    --pm-5: 2.5rem;
    --pm-6: 3rem;

    --line-height: 1.6;
}
*{
    margin: 0;
}
a{ color: inherit; text-decoration: none; transition: .6s;}
a:hover{ color: inherit;}
img{
    max-width: 100%;
    height: auto;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
body{
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
}

/* -------CSS common class ----- */
.section_color{ color: var(--color-0);}
.section_title{
    position: relative;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    padding-bottom: var(--pm-2);
}
.section_dtl{
    font-size: 1.3rem;
    text-align: center;
    padding-bottom: var(--pm-2);
    color: var(--color-1);
    opacity: .7;
}

/* ================== home box ================== */
.home{
    background: var(--color-0);
    height: 100vh;
    overflow: hidden;
}
.box1, .box2, .box3{
    position: fixed;
    width: 100%;
    height: 100vh;
    transform: var(--rotate);
    border-radius: 30px;
    background: var(--color-1);

}
.box1{
    width: 400px;
    height: 400px;
    top: -18rem;
    left: -1rem;
    z-index: 1;
}
.box2{
    background: none;
    background-image: url(assets/img/h.jpg);
    background-position: center;
    background-size: cover;
    right: -6%;
    box-shadow: 0px 0px 10px 3px var(--color-1) inset;
    top: 0;
}
.box2::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--color-1);
    opacity: .6;
    border-radius: 30px;
}
.box3{
    right: -45%;
    top: 0;
    box-shadow: 0px 0px 10px 3px rgb(73, 73, 73);
}

/* ================== Wraper Area Start ================== */
.wraper{
    position: relative;
    height: 100vh;
    z-index: 2;
    /* padding: .8rem 5rem; */
}

/* navbar */
.nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav_list{ display: flex;}
.nav_logo{ 
    max-width: 150px; 
    margin-top: 2rem;
}
.nav_toggle{ display: none;}
.nav_link{ 
    padding: 10px; 
    font-weight: 500;
    transition: .5s;
    color: var(--color-3);
}
.nav_link:hover{ color: var(--color-0);}

/* social-media */
.social_media{
    position: absolute;
    width: 100%;
    bottom: 3rem;
    z-index: 2;
} 
.nav_icon{ 
    font-size: 1.5rem;
    margin-right: 30px;
    color: var(--color-3);
}
/* hoem-form */
.home_text {
    color: var(--color-3);
    margin-top: 6rem;
    text-align: right;
}
.home_title {
    font-size: 2rem;
    padding-bottom: 1rem;
}
.home_dtl {
    padding-bottom: 1.5rem;
    line-height: var(--line-height);
}
/* subscrib */
.subscrib_form input {
    padding: 1rem;
    margin-bottom: 1rem;
    background: white;
    color: var(--color-1);
    font-weight: 600;
    border: none;
    border-radius: 5px;
    text-decoration: none;
}
.subscrib_form input[type="submit"] {
    margin-left: -.7rem;
    color: var(--color-3);
    background: var(--color-0);
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}
/* --------- Wrap Area End --------- */

/* ================== About Area Start ================== */
.close_icon{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.7rem;
    color: var(--color-3);
    background-color: var(--color-0);
    padding: 7px 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: .7s;
}
.close_icon:hover{
    background-color: var(--color-1);
}
.about , .portfolio , .contact{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: #fff;
    z-index: 2;
    padding-top: var(--header-height);
    transition: .8s;
    overflow: scroll;
}
.about{
    left: -100%;
}
.show_about{
    left: 0;
}


.contact{right: -100%;}
.show_contact{right: 0; } 


.portfolio { right: 0; left: 0; top: -100%; }
.show_portfolio { top: 0; }

.feature_box{ text-align: center;}
.feature_icon{
    font-size: 4rem;
    color: var(--color-0);
}
.feature_title{
    font-weight: 600;
    padding-bottom: var(--pm-1);
}
.feature_dtl{
    color: var(--color-1);
    opacity: .9;
    font-weight: 500;
    opacity: .7;
    line-height: var(--line-height);
}
/* --------- About Area End --------- */

/* ================== Portfolio Area Start ================== */
.portfolio_title .close_icon { padding: 0px 14px; }
.portfolio_box{
    padding-top: var(--pm-4);
}
.portfolio_img{
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: var(--pm-3);
}
.portfolio_overlay{ 
    position: absolute;
    width: 100%;
    bottom: 0;
    top: 0;
    background-color: rgba(3, 3, 3, 0.658);
    z-index: 1;
    transition: 1s ease;
    opacity: 0;
}
.portfolio_img:hover .portfolio_overlay{
    opacity: 1;
}
.portfolio_img img{ 
    width: 100%;
    height: 225px;
    border-radius: 5px;
    transition: .8s all ease;
}
.portfolio_img:hover img { transform: scale(120%);}
.portfolio_text{
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--color-3);
    justify-content: center;
    align-items: center;
}

.portfolio_btn{
    text-align: center;
    margin: var(--pm-4) 0;
}
.section_btn{
    border: 1px solid black;
    padding: 15px 25px;
    font-weight: 700;
    color: var(--color-1);
    border-radius: 5px;
    transition: .6s;
}
.section_btn:hover{
    background: var(--color-1);
    color: var(--color-3);
}
/* --------- Portfolio Area End --------- */

/* ================== Contact Area start ================== */
.feature_form {
    margin: 2rem var(--pm-3);
}
.feature_form input[type="submit"] {
    border: none !important;
    color: var(--color-3);
    background-color: var(--color-1);
    font-weight: 700;
    text-transform: uppercase;
    transition: .6s;
}
.feature_form input[type="submit"]:hover { background: var(--color-0);}
.contact_data .feature_box {
    margin-bottom: var(--pm-3);
}
.feature_form label{
    margin: 1rem 0 .8rem;
    font-size: 1rem;
    color: var(--color-1);
    opacity: .7;
    font-weight: 500;
    font-size: 1.2rem;
}
.feature_form input ,.feature_form textarea{
    border: 3px solid rgb(207, 207, 207) !important;
    padding: .8rem ;
}
.feature_form_btn{
    border: none !important;
    margin: 1.5rem 0;
}
.form-control:focus{
    outline: none;
    box-shadow: none;
}
/* --------- Contact Area End --------- */



/* ================== Responsive ================== */
@media screen and (max-width: 768px) {
    .box2{ right: -15%;}
}
@media screen and (max-width: 576px) {
    .box1{top: -16rem; left: -3rem;}
    .home_text { max-width: 100%;}
}