html {
    scroll-behavior: smooth;
}

* {
    padding:0;
    margin:0;
    box-sizing:border-box;
}
body {
   font-size:1.125rem;
   line-height:1.2rem;
   font-family:'Open Sans', sans-serif;
   font-weight: 500;
}

/* --------Customize Scroll-bar---------- */
body::-webkit-scrollbar {
    width:13px;
    /* height:20px; */
    
}
body::-webkit-scrollbar-track {
    box-shadow:0 0 5px rgba(0,0,0,.5) inset;
}
body::-webkit-scrollbar-thumb {
    background-color:rgb(42, 137, 214);
    border-radius:10px;
}
/* body::-webkit-scrollbar-track-piece {
    background-color:green;
} */


/* ---------------header--------- */
header {
    /* color:rgb(17, 19, 27); */
    padding:1.5em;
    background-color:#240707;
    background-image: repeating-linear-gradient(45deg, hsla(207,0%,63%,0.05) 0px, hsla(207,0%,63%,0.05) 1px,transparent 1px, transparent 11px,hsla(207,0%,63%,0.05) 11px, hsla(207,0%,63%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(0deg, hsla(207,0%,63%,0.05) 0px, hsla(207,0%,63%,0.05) 1px,transparent 1px, transparent 11px,hsla(207,0%,63%,0.05) 11px, hsla(207,0%,63%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(135deg, hsla(207,0%,63%,0.05) 0px, hsla(207,0%,63%,0.05) 1px,transparent 1px, transparent 11px,hsla(207,0%,63%,0.05) 11px, hsla(207,0%,63%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(90deg, hsla(207,0%,63%,0.05) 0px, hsla(207,0%,63%,0.05) 1px,transparent 1px, transparent 11px,hsla(207,0%,63%,0.05) 11px, hsla(207,0%,63%,0.05) 12px,transparent 12px, transparent 32px),linear-gradient(90deg, rgb(17, 17, 17),rgb(66, 66, 66));
    box-shadow:1px 1px 5px -1px currentColor;
}
.container-header {
    display:flex;
    flex-direction:row-reverse;
    justify-content:space-between;
    align-items:center;
}
.col-1 {
    width:32%;
}
.col-2 {
    width:46%;
}
.col-3 {
    width:20%;
}

/**********************company logo********************/
.company-logo {
    text-align:center;
    margin-right:1rem;
}

.company-logo a 
{
    text-decoration:none;
    font-family: 'Lobster', cursive;
    font-size:1.3rem;
    color:#d9bb11;
   
}
.company-logo  h1 {
    text-shadow:2px 2px 2px rgba(0,0,0,0.4);
}

/*-------------- navigation bar----------------*/
#fa-nav{
    display:none;
}
header nav ul {

    display:flex;
    flex-direction:row;
    justify-content:flex-end;
    list-style-type: none;
}
header ul li,
.register-section,
.login-section {

    margin:0 0.4em;
}
a {
    text-decoration:none;
}
header li a {
    font-family:'Ubuntu',sans-serif;
    padding:0.2em 0.3em;
    font-size:1.15rem;
    font-weight:500;
    color:#ffffff;

}
header li a:hover,
header li a:focus {
    color:#c75919;
}


/*-----------login section----------- */

.register-login-section {
    display:flex;
    justify-content:center;
    margin-left:1em;
}
.register-section,
.login-section {
    color:#e8ecac;
    font-size:1.1rem;
}
.register-login-section a:hover { 
    font-family:'Lucida Sans', 'Lucida Sans Regular',sans-serif;
    color:#b8b50c;
}


@media (max-width:1080px) {
    .col-1 {
        display:none;
    }
    .col-2 {
        width:70%;
    }
    .col-3 {
        width:25%;
    }
}

/*---------------Media queries for navigation bar---------------- */
@media (max-width:800px) {   
    .container-header {
        flex-direction:column-reverse;
    }
    .col-2 {
        width:100%;
    }
    .col-3 {
        width:100%;
    }
    header nav ul {
         margin-top:1em;
        justify-content:center;  
    }
    .company-logo{
        margin-bottom:0.5em;
    }
}

@media (max-width:540px){
    .col-3 {
        width:30%;
    }
    .company-logo {
        transform:translateY(23px);
    }
    #fa-nav{
        display:contents;
        cursor:pointer;
        font-size:1.5rem;
        color:#fff;
        padding:0.3em;
    }
    .navbar {
        display:none;
       
    }
    header nav ul {
        flex-direction:column;
        align-items:center;
    }
    header nav li {
        margin-bottom:0.3em;
    }
}
.nav-visible {
     display:contents;
}


/* ------------section------------------- */
/* section {
    position:relative;
} */
.first-section-bg {
    /* width:100%; */
    font-family:Helvetica, sans-serif;
    position:relative;
}
.inner-layer video {
    width:100%;
}
video {
    display:block;
}
.upper-layer {
    position:absolute;
    top:0;
    left:0;
    background-color:rgba(0,0,0,0.4);
    width:100%;
    height:100%;
    display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
}
.section-text-contents  {
    margin-bottom:1em;
    padding:1em 0.6em;
    color:#f5f5f5;
}
.section-text-contents h3 {
    font-size:2.4rem;
    font-family:'Ubuntu',sans-serif;
    letter-spacing:1px; 
    padding-bottom:0.3em;  
    /* text-decoration:underline solid #f5f5f5; */
    border-bottom: 3px solid #f5f5f5;
}
/* .section-icons {
    padding:0 1em;
}
.section-icons img {
    width:70px;
    padding:0.4em 0.5em;
    margin:0 0.3em;
    background-color:white; 
    border-radius:20px;
    box-shadow:1px 1px 5px rgba(0, 0, 0, 0.8);
} */


@media (max-width:540px) {
    .section-text-contents {
        margin-bottom:0.5em;
        padding:0.5em;
    }
    .section-text-contents h3 {
        font-size:1.7rem;
    }   
/*     .section-icons {
        padding:0 0.4em;
    }
    .section-icons img {
        width:50px;
        padding:0.3em;
        margin:0 0.1em;
    } */
}


/* -------------section  for About Me---------------- */


.Aboutme-container {
    
    margin-top:-6px;
    background-color:#4527CD;
    display:flex;
    flex-direction:column;
    justify-content:center;  
}
#Aboutme {
    width:min(960px,90%);
    margin:0 auto;
    padding:3em 0;
}
.aboutme-image {
    width:200px;
    height:200px;
    margin:1em auto 0;
    border-radius:50%; 
    padding:0.6em;
    box-shadow:0px 1px 10px rgba(0,0,0,0.5);
}
.aboutme-image img{
    width:100%;
    border-radius:50%;
    height:100%;
}
.aboutme-text-contents {
    color:white;
    margin-top:2em;
}
.aboutme-text-contents h3 {
    text-align:center;
    padding:0.5em 0 0.2em;
    margin-bottom:0.4em;
    border-bottom:3px solid;
    font-size: 1.7rem;
    font-weight:500;
}
.aboutme-text-contents p {
    font:500 0.9rem  helvetica,sans-serif;
    text-align:justify;
    letter-spacing:0.5px;
}

@media (min-width:540px) {
    .aboutme-text-contents p {
        font-size: 1rem;
    }
}

/* ------------Main Section having all the projects----------- */

.main-container {
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:center;
}
.my-projects {
    padding:1em;
    background-color:rgb(20, 22, 24);
}
.my-projects h2 {
    margin:1em 0;
    padding:0.1em 0;
    font-family:'ABeeZee',sans-serif;
    font-size:1.3rem;
    border-bottom:3px solid ;
    color:rgb(142, 251, 255);
    font-weight:500;
}
.projects-cards {
    width:min(90%,1040px);
    margin:0.4em auto 0;
}
.card-section {
    display:flex;
    flex-direction:column;
}

.card {
    margin-bottom:1.3em;
    box-shadow:10px 10px 20px rgba(0,0,0,0.6);
     background-color:rgb(252, 252, 252);
    color:#fff;
}
.card-header {
    width:100%;
    /* margin-bottom:1em; */
    position:relative;
}
.card-header img {
    max-width:100%;
}
/* .card-header-layer {
    position:absolute;
    top:0;
    left:0;
    background-color:rgba(0, 0, 0, 0.6);
    width:100%;
    height:100%;
} */
.card-body {
    padding:0 0.7em;
}
.card-body h3 {
    font:500 1rem 'ABeeZee',sans-serif;
    color:rgb(37, 71, 223);
    padding:1em 0 0.5em;
}
.card-body p {
    font-family:'Lucida Sans', 'Lucida Sans Regular',sans-serif;
    color:#353535;
    font-weight:400;
    font-size:0.9rem;
    padding-bottom:0.6em;
}
.card-footer {
    display:flex;
    justify-content:space-between;
    /* background-color:rgb(255, 255, 255); */
    padding:0.8em 0.7em;
}
.card-footer a {
    font-size:1rem;
    /* margin-bottom:0.4em; */
    font-family:'Ubuntu',sans-serif;
    font-weight:500;
    color:rgb(43, 135, 189);
}
.card-footer a:hover,
.card-footer a:focus {
    color:rgb(0, 74, 134);
    text-decoration:underline;
}


@media (min-width:540px) {
    .my-projects h2 {
        font-size: 1.5rem;
    }
    .card-body h3 {
        font-size: 1.35rem;
    }
    .card-body p {
        font-size:1rem;
    }
    .card-footer a {
        font-size:1.3rem;
    }
}

@media (min-width:800px) {
    .card-section {
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:flex-start;
        width:100%;
    }
    .card {
        width:48%;
    }  
}


/* ------------------------footer--------------------------- */
.footer-bg {
    background-color:#ffffff;
    font-size:1rem;
}
.footer-heading {
    font:500 2rem 'ABeeZee',sans-serif;
    text-align:center;
    padding:0.75em 0.75em 0.4em;
    color:rgb(33, 123, 207);
    border-bottom:3px rgb(33, 123, 207) solid;
}
.container-footer {
    padding:2em 1em 4em;
}
address {
    padding:0.5em 0;
    font:500 0.83rem 'Lucida Sans Regular', sans-serif;
}
footer h3 {
    font-style:normal;
    font:600 1.4rem 'ABeeZee',sans-serif;
    color:rgb(7, 26, 109);
    margin-bottom:0.5em;
    text-decoration:underline;
}

address p,
address a {
    color:rgb(51, 48, 48);
    font-style:normal;
    margin-bottom:0.2em;
}
.footer-navigation {
   list-style-type:none;
    margin-bottom:0.7em;
}
.footer-nav-tab {
    font:500 0.9rem 'Lucida Sans Regular', sans-serif;
    color:rgb(49, 47, 47);
    margin-bottom:0.1em;
}
.footer-nav-tab:hover,
.footer-nav-tab:focus {
     text-decoration:1.6px underline #fff;
}
.Social-network-links {
    margin-top:1em;
}
.social {
    font-size:1.1rem;
    margin-left:0.33em;
    color:rgb(255, 255, 255);
    opacity:0.8;
    background-color:#0f3c9e;
    padding:0.5em;
    border-radius:50%;
    transition:opacity 200ms ease-in;
}
.fa-facebook {
    padding:0.5em 0.25em;
}

.social:hover {
    /* background-color:rgb(3, 82, 146); */
    /* color:#ffffff; */
    opacity:1;
    transition:opacity 200ms ease-out;
}
.fa-facebook {
    padding:0.5em 0.25em;
}

@media (min-width:540px) {
    .container-footer {
        padding:1.5em 1.5em 4em;
    }
    address,
    .footer-nav-tab {
         font-size:1rem;
     }   
     footer h3 {
         font-size:1.6rem;
     } 
}

@media (min-width:800px) {
    .col-contact-plus-quick-links {
        display:flex;
        justify-content:space-around;
    } 
    .col-social-networks {
        display:flex;
        flex-direction:column;
        align-items:center;
        /* justify-content: flex-start; */
    }
    .Social-network-links {
        margin-top:0.2em;
    }
}

@media (min-width:1040px) {
    .container-footer {
        display:flex;
        justify-content:space-around;
        align-items:flex-start;
    }
    .col-contact-plus-quick-links {
        width:65%;
        display:flex;
        justify-content:space-around;
    } 
    .col-social-networks {
        width:35%;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
    }
}