@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
/* Global Variables */
:root {
    --dark-primary:#1b1f24;
    --blue-primary:#12bdff;
    --prime-hover:#0c8ec2;
}
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
header{
    background-color: var(--dark-primary);
    padding : 20px;
    color:#fff;
    display:flex;
    /* justify-content depends on flex property 
    space-around == equal splitting of spaces
    space-between == equal splitting of spaces between the center alone
    space-evenly == equal splitting of spaces between the center and the edges */
    justify-content: space-evenly;
    align-items:center;
}

header .logo{
    color:var(--blue-primary);
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 30px;
}
header a{
    color:#fff;
    text-decoration: none;
    font-weight: 600;
}
header a:hover{
    color:var(--blue-primary);
}
/* Section Image Homepage */
section.img-sector{
    background-color: var(--dark-primary);
    color: #fff;
    display:flex;
    align-items: center;
    padding:20px 120px 0px 240px;
}
.img-sector-title{
    font-size: 48px;
    font-weight:900;
}
.img-sector-title > span{
    color:var(--blue-primary);
}
.img-sector-descr{
    color: #bdbfbf;
}
.social-icons{
    margin: 20px 0;
}
.social-icons li{
    margin-right: 20px;
}
ul.social-icons{
    list-style: none;
    display: flex;
}
.social-icons li>a{
    text-decoration: none;
    color: #fff;
}
.social-icons li a > i.fa-facebook:hover{
    color:#1877f2;
}
.social-icons li a > i.fa-linkedin:hover{
    color:#0072b1;
}
.social-icons li a > i.fa-instagram:hover{
    color:#c13584;
}
.social-icons li a > i.fa-github:hover{
    color: #808080;
}
.act-buttons button{
    margin-right: 20px;
}
/*buttons styling with CSS*/

.btn{
    padding:10px 20px;
    border-radius: 2px;
    border: none;
    cursor: pointer;
}
.btn.btn-prime{
    background-color: var(--blue-primary);
    font-weight: 600;
    color:#fff;
    border-radius: 4px;    
}
.btn.btn-prime:hover{
    background-color:var(--prime-hover);
}
.btn-dark-outlined{
    background-color: var(--dark-primary);
    border: 1px solid var(--blue-primary);
    color:var(--blue-primary);
    border-radius: 5px;
    font-weight: 900;
}
.btn-dark-outlined:hover{
    background-color: var(--blue-primary);
    color: #fff;
}

/* About Me Section  */
.about-section{
    background-color: #22282f;
    color: #fff;
    padding: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.about-section img{
    width:250px;
    height:250px;
    border-radius:50% ;
    border:5px solid var(--blue-primary);
    box-shadow: 3px 5px 40px #03506e;
}
.about-section-desc{
    margin-left: 200px;
}
.about-section-desc h4{
    font-size: 30px;
    font-weight: 900;
}
.about-section-desc ul{
    list-style: none;
    margin:20px 0;
}
.about-section-desc li{
    margin: 20px 0;
    color: #bdbfbf;
}
.about-section-desc li>strong{
    color: #fff;
}
.about-section-desc h4 > span{
    color: var(--blue-primary);
}

/* Features Section */

.features-section{
    background-color: var(--dark-primary);
    color:#fff;
    padding:60px;
    text-align: center;
}
.fs-title{
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 40px;
    color: var(--blue-primary);
}
.fs-title:hover{
    color:#fff;
}
.ws-blocks{
    display:flex;
    justify-content: center;
}
.ws-box-1{
    background-color: #22282f;
    padding: 30px;
    max-width:300px;
    text-align: left;
    border-radius: 10px;
    cursor: pointer;
    margin-right: 40px;
}
.ws-box-1 p{
    color: #bdbfbf;
    padding-top:10px;
}
.ws-box-1 a{
    text-decoration: none;
    color: #feda75;
    display: block;
    margin-top: 10px;
}
.ws-box-1 h4{
    text-align: center;
    font-weight: 900;
    color:#fff;
    margin-top:10px;
}
.ws-section-icons{
    padding: 10px;
    border-radius: 50%;
    margin-bottom:20px;
    font-size: 40px;
}
.ws-box-1:hover{
    background-color: #1b1f24;
    border:1px solid #fff;
}
/* footer styling with CSS */
footer{
    background-color: #22282f;;
    color:#fff;
    padding:20px 0;
    text-align: center;
}
footer a{
    text-decoration: none;
    color: #feda75;
}

/* Media Quries */

@media only screen and (max-width: 600px) {
    header{
        flex-direction: column;
    }
    header > *{
        margin-bottom : 10px;
    }
    /* img-sector section */
    section.img-sector{
        flex-direction: column;
        padding : 40px;
    }
    /* About-section */
    section.about-section{
        flex-direction: column;
    }
    .about-section-desc{
        margin-left: 0;
        margin-top: 30px;
    }
    /* Features Section */
    .features-section{
        padding: 30px 10px;
    }
    .ws-blocks{
        flex-direction: column;
        align-items: center;
    }
    .ws-box-1{
        margin-bottom: 20px;
        width:100%;
        margin-right: 0;
    }
}