*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    
    
}

body,html{
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
}



/* header style */

header{
    width:100%;
    min-height: 100vh;
    margin-bottom: 100px;

}

/* navigation bar style */
.navbar{
    width:100%;
    display:flex;
    justify-content: space-between;
    align-items:center;
    flex-wrap: wrap;
    background:#fff;
    padding:20px 40px;
    position: fixed;
    top:0;
    z-index:99;
    gap:5px;
}


.navlinks{
    display:flex;
    list-style:none;
    gap:30px;
}

#menu-toggle{
    display:none;
}

/* Hamburger icon */
.menu-icon{
    display:none;
    width:30px;
    height:22px;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
}

.menu-icon span{
    width:100%;
    height:3px;
    background:#777;
    border-radius:5px;
    transition:0.3s;
}



/* header content style */

.header-content {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background-color: #fafafa;


}

.headtxt {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 40px;
    gap: 20px;
    z-index: 2;

    
}

.headimgs {
    flex: 0 0 50%;
    position: relative;
    height: 100%;
    min-height: 100vh;
    
   
}

.headimgs .img1 {
    position: absolute;
    width:auto;
    height: auto;
    transform: translate(-12%,-27%);
    z-index: 1;
}

.headimgs .img2 {
    position: absolute;
    width: auto;
    z-index: 2;
    transform: translate(7%,-18%);
    
}


/* about section style */

#about{
    width:100%;
    min-height:600px;
    margin:50px 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    padding:20px 0;
    padding:20px 60px;
    gap: 50px;
    background-color: #f5f5f5;
    
}

.aboutTxt{
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 25px;
    
}

.aboutImgs{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    flex-wrap: wrap;
    gap: 30px;
}

.feature-box{
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-box img{
    width: 60px;
}

.feature-box h3{
    margin: 10px 0;
}

.feature-box p{
    line-height: 25px;
    color: #5c5c5c;
}



/* articles  section style */

#blog{
    width:90%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin: 100px auto;
    gap: 40px;
    
   
}

.articles{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    
}

.blogbox{
    width: 250px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    background-color: #f5f5f5;
    padding: 0 5px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(6, 6, 6, 0.08);
    
}

.blogbox img{
    height: 200px;
    border-radius: 20px;
    width: 100%;

}
.blogbox cite{
    color:rgb(77, 76, 76);
}


.blogbox h3{
    margin: 10px 0;
    text-align: center;
    color: black;
}

.blogbox p{
    margin: 10px 0;
    text-align: center;
    color:rgb(77, 76, 76)
}
.blogbox:hover{
    background-color: #1f2a38;
    transform: translate(0,-10px);
    transition: all 0.5s ease-in-out;
}


.blogbox:hover *{
    color:white;
    
}


/* footer style */

footer{
    width:100%;
    background-color: #0f0e0e;
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 100px;
    padding:40px 80px;
    gap:40px;
    

}

footer ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    list-style: none;
    margin: 30px 20px;
}

footer ul li i.fa-brands.fa-instagram,
footer ul li i.fa-brands.fa-facebook,
footer ul li i.fa-brands.fa-pinterest-p,
footer ul li i.fa-brands.fa-x-twitter,
footer ul li i.fa-brands.fa-youtube{
    color: white;
    cursor: pointer;
   
}
footer ul li i.fa-brands.fa-instagram:hover,
footer ul li i.fa-brands.fa-facebook:hover,
footer ul li i.fa-brands.fa-pinterest-p:hover,
footer ul li i.fa-brands.fa-x-twitter:hover,
footer ul li i.fa-brands.fa-youtube:hover{
    color: #52ddb1;
    transform: translateY(5px);
    transition: all 0.3s ease-in-out;
}



/* footer careers */

#careers{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    gap: 50px;
    
}

#careers ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#careers a {
    color: whitesmoke;
    text-decoration: none;
    font-size: 16px;
}

#careers a:hover{
    color: #52ddb1;
    
}

.copyrights{
    width: fit-content;
    height: fit-content;
    color: white;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}


#careers,
.copyrights{
    flex:1;
    min-width:220px;
}


/* footer attribution */


.attribution { 
    width: 100%;
    font-size: 11px; 
    text-align: center; 
    color: white; 
    background-color: #0f0e0e;
     padding: 15px;
     display: flex; 
     justify-content: center;
     align-items: center;
    gap: 10px;
}

.attribution a { 
    color: #52ddb1; 
    text-decoration: none;
}



/* all buttons style */

button{
    width: fit-content;
    height: fit-content;
    padding: 15px 30px;
    background: linear-gradient(
    120deg,
    #52ddb1 0%,
    rgb(41, 212, 41) 25%,
    #52ddb1 100%
    );
    box-shadow: #676565 0px 20px 25px -5px;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    
}


button:hover{
    animation: move 2s ease-in-out ;
    transform: scale(0.95);
    background: #0f0e0e;
    transition: all 0.3s ease-in-out;
}



footer button:hover{
    background-color: aquamarine;
    color: black;
}

button:active{
    animation:none;
    transform: scale(0.99);
    transition: all 0.1s ease-in-out;
    background-color: aquamarine;
    color: black;
}

@keyframes move {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(4px);
    }
}


/* fonts and headings style */


a{
    text-decoration: none;
    color: #444;
    font-weight: 500;
    

}

a:hover{
    color: #52ddb1;
    text-decoration:  underline;
}



h1{
    font-size: 42px;
    font-weight: 700;
}

h2{
    font-size: 32px;
    font-weight: 600;
}

h3{
    font-size: 20px;
    font-weight: 600;
}
p{
    color: #5c5c5c;
    font-weight: 400;
}


footer p{
    color: white;
    font-weight: 400;
}


/* media query  */

/* 1- for tablets and small screens */



@media (max-width:768px)and (min-width:481px) {



    .headimgs,
    .headimgs .img1,
    .headimgs .img2{
        display:none;
    }


  .headtxt {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 40px;
    gap: 20px;

}

    .navbar{
        padding:20px;
    }

    .navlinks{
        position:absolute;
        top:80px;
        right:0;
        background:#fff;
        width:100%;
        flex-direction:column;
        align-items:center;
        gap:25px;
        padding:30px 0;
        box-shadow:0 10px 20px rgba(0,0,0,0.1);
        display:none;
    }

    .menu-icon{
        display:flex;
    }

    .nav-btn{
        display:none;
    }

    #menu-toggle:checked ~ .navlinks{
        display:flex;
    }

    .feature-box{
        width:100%;
        align-items:center;
        text-align:center;
    }

    .articles{
        flex-direction:column;
        align-items:center;
    }

    footer{
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding:40px 20px;
    }

    #careers{
        justify-content:center;
    }
}


@media (max-width:480px){


    .header-content {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    align-items: center;
    background-color: #fafafa;
    gap: 10%;
    padding-bottom: 20px;


}

.headtxt {
    flex: 0 0 40%;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    text-align: center;
    gap: 20px;
    z-index: 2;

    
}

.headimgs{
    position: relative;
    width: 100%;
    min-height: 55vh;  

}


.headimgs .img1{
    position: absolute;
    width: 200%;
    max-width: none;
    top: -80%;             
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}


.headimgs .img2{
    position: absolute;
    width: 90%;
    max-width: none;
    left: 50%;
    top: -10%;                
    transform: translateX(-50%);
    z-index: 2;
}






    h1{ font-size:32px; }
    h2{ font-size:24px; }
    p{ font-size:14px; }

    button{
        padding:12px 25px;
    }

    .navbar{
        padding:20px;
    }

    .navlinks{
        position:absolute;
        top:80px;
        right:0;
        background:#fff;
        width:100%;
        flex-direction:column;
        align-items:center;
        gap:25px;
        padding:30px 0;
        box-shadow:0 10px 20px rgba(0,0,0,0.1);
        display:none;
    }

    .menu-icon{
        display:flex;
    }

    .nav-btn{
        display:none;
    }

    #menu-toggle:checked ~ .navlinks{
        display:flex;
    }

    .feature-box{
        width:100%;
        align-items:center;
        text-align:center;
    }

    .articles{
        flex-direction:column;
        align-items:center;
    }

    footer{
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding:40px 20px;
    }

    #careers{
        justify-content:center;
    }

    
}

@media (min-width: 390px) and (max-width: 430px) {
.header-content {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    align-items: center;
    background-color: #fafafa;
    gap: 10%;
    padding-bottom: 20px;


}

.headtxt {
    flex: 0 0 40%;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    text-align: center;
    gap: 20px;
    z-index: 2;

    
}

.headimgs{
    position: relative;
    width: 100%;
    min-height: 55vh;   
   
}


.headimgs .img1{
    position: absolute;
    width: 200%;
    max-width: none;
    top: -40%;            
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}


.headimgs .img2{
    position: absolute;
    width: 95%;
    max-width: none;
    left: 50%;
    top: -10%;                 
    transform: translateX(-50%);
    z-index: 2;
}






    h1{ font-size:32px; }
    h2{ font-size:24px; }
    p{ font-size:14px; }

    button{
        padding:12px 25px;
    }

    .navbar{
        padding:20px;
    }

    .navlinks{
        position:absolute;
        top:80px;
        right:0;
        background:#fff;
        width:100%;
        flex-direction:column;
        align-items:center;
        gap:25px;
        padding:30px 0;
        box-shadow:0 10px 20px rgba(0,0,0,0.1);
        display:none;
    }

    .menu-icon{
        display:flex;
    }

    .nav-btn{
        display:none;
    }

    #menu-toggle:checked ~ .navlinks{
        display:flex;
    }

    .feature-box{
        width:100%;
        align-items:center;
        text-align:center;
    }

    .articles{
        flex-direction:column;
        align-items:center;
    }

    footer{
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding:40px 20px;
    }

    #careers{
        justify-content:center;
    }



}




@media (max-width:380px) {
    .header-content {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    align-items: center;
    background-color: #fafafa;
    gap: 10%;
    padding-bottom: 20px;


}

.headtxt {
    flex: 0 0 40%;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    text-align: center;
    gap: 20px;
    z-index: 2;

    
}

.headimgs{
    position: relative;
    width: 100%;
    min-height: 55vh;   
   
}


.headimgs .img1{
    position: absolute;
    width: 200%;
    max-width: none;
    top: -60%;            
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}


.headimgs .img2{
    position: absolute;
    width: 95%;
    max-width: none;
    left: 50%;
    top: -10%;                 
    transform: translateX(-50%);
    z-index: 2;
}






    h1{ font-size:32px; }
    h2{ font-size:24px; }
    p{ font-size:14px; }

    button{
        padding:12px 25px;
    }

    .navbar{
        padding:20px;
    }

    .navlinks{
        position:absolute;
        top:80px;
        right:0;
        background:#fff;
        width:100%;
        flex-direction:column;
        align-items:center;
        gap:25px;
        padding:30px 0;
        box-shadow:0 10px 20px rgba(0,0,0,0.1);
        display:none;
    }

    .menu-icon{
        display:flex;
    }

    .nav-btn{
        display:none;
    }

    #menu-toggle:checked ~ .navlinks{
        display:flex;
    }

    .feature-box{
        width:100%;
        align-items:center;
        text-align:center;
    }

    .articles{
        flex-direction:column;
        align-items:center;
    }

    footer{
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding:40px 20px;
    }

    #careers{
        justify-content:center;
    }

    
}