@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
        Helvetica, Arial, "Lucida Grande", sans-serif;
}

body {
    height: 100%;
    width: 100%;
    /* display: flex; */
}

/* <!-- navigation bar start --> */
.navbar_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: rgb(255, 255, 255);
    color: white;
    margin: 10px 30px 0px 50px;
}

.nav_tag {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    align-items: center;
    justify-content: space-between;
}
.hamburger {
    display: none;
    cursor: pointer;
}

.hamburger i {
    font-size: 1.5rem;
}
.nav_links {
    display: flex;
    gap: 3rem;
}
.hamburger {
    display: none;
    cursor: pointer;
    padding: 10px;
}

.hamburger i {
    font-size: 1.5rem;
    color: #333;
}

.myname {
    color: black;
    /* margin-left: -8px; */
}

#talktome {
    height: 40px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    background: #833ab4;
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045);
    color: white;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}
#talktome:hover {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5);
    /* background-color: gray;
    color: black;
    border: none; */

    /* Increases shadow on hover */
}

#home,
#about,
#contact {
    color: black;
    font-family: 'Inter', sans-serif;
    font-weight: 450;
    font-size: medium;
    display: flex;
    align-items: center;
}

#contact:hover {
    color: rgb(111, 111, 111);
    transform: scale(1.1);
    transition-duration: 2ms;
    
}

#about:hover {
    color: rgb(111, 111, 111);
    transform: scale(1.1);
    transition-duration: 2ms;
}

#home:hover {
    color: rgb(111, 111, 111);
    transform: scale(1.1);
    transition-duration: 2ms;

}
/* <!-- navigation bar end --> */


/*==============================
    COMMON CONTAINER
==============================*/

.container{
    width:90%;
    max-width:1450px;
    margin:auto;
}

/*==============================
    HERO
==============================*/

.hero{
    padding:80px 0 60px;
}

.hero-title{
    font-size:50px;
    font-weight:700;
    line-height:1.08;
    letter-spacing:-2px;
    max-width:1200px;
}

.hero-title span{
    color:#000;
}

.hero-description{
    margin-top:35px;
    font-size:21px;
    line-height:1.8;
    color:rgb(118, 118, 118);
    max-width:1100px;
}

.hero-description a{
    background: #833ab4;
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045); 
    color: white;
    padding: 3px;
    border-radius: 5px;
}

.hero-image{
    margin-top:60px;
}

.hero-image img{
    width:100%;
    display:block;
    border-radius:28px;
}

/*==============================
    CONTENT SECTION
==============================*/

.content{
    padding:20px 0 80px;
}

.section-title{
    font-size:30px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:-1px;
}

.section-description{
    margin-top:20px;
    margin-bottom: 50px;
    font-size:21px;
    line-height:1.8;
    color:rgb(118, 118, 118);
    max-width:1100px;
}

.section-image{
    margin-top:30px;
}

.section-image img{
    width:100%;
    height: 50%;
    border-radius:25px;
}


/* footer start */

.footer_container {
    width: 100%;
    background-color: #FAF9F6;
    padding: 5rem;
    margin-top: 5rem;
}

.footer_box {
    display: flex;
    max-width: 90%;
    margin: 0px auto;
    margin-bottom: 1rem;
    flex-direction: row;
    justify-content: space-between;
}

.footer_right_box {
    display: flex;
    flex-direction: row;
    gap: 5rem;
}

.quick_access {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stay_connected {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.legal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer_left_box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer_image_box {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.C{
    font-size: small;
    color: rgb(0, 0, 0);
}

.f{
    font-size: small;
    color: rgb(0, 0, 0);
}

.h4{
    color: rgb(118, 118, 118);
}
#myname{
    color: rgb(118, 118, 118);
}

/* footer end */

/* Responsive start */

/* ===========================
   TABLET (991px and below)
=========================== */


@media (max-width:992px){

.container{
    width:92%;
}

.hero{
    padding:60px 0;
}

.hero-title{
    font-size:42px;
}

.hero-description{
    font-size:18px;
}

.section-title{
    font-size:25px;
}

.section-description{
    font-size:18px;
}

.hero-image img,
.section-image img{
    border-radius:20px;
}

}


/* ===========================
   MOBILE (768px and below)
=========================== */

@media (max-width:768px){

    /* Navbar */

    .navbar_box{
        margin:0;
        padding:20px;
        box-shadow:0 2px 10px rgba(0,0,0,.08);
    }

    .nav_tag{
        display:none;
    }

    .hamburger{
        display:block;
    }

    .nav_links{
        display:none;
        flex-direction:column;
        position:absolute;
        top:75px;
        right:20px;
        width:220px;
        background:#fff;
        border-radius:12px;
        padding:15px;
        gap:15px;
        box-shadow:0 15px 40px rgba(0,0,0,.15);
        z-index:999;
    }

    .nav_links.active{
        display:flex;
    }

    .nav_links a{
        color:#111;
        padding:8px 0;
    }

    /* Navbar */

    /* Hero */

    .hero{
        padding:45px 0;
    }

    .container{
        width:92%;
    }

    .hero-title{
        font-size:34px;
        line-height:1.15;
        letter-spacing:-0.8px;
    }

    .hero-description{
        margin-top:18px;
        font-size:17px;
        line-height:1.7;
    }

    .hero-image{
        margin-top:35px;
    }

    .hero-image img{
        border-radius:16px;
    }

    /* Hero */

    /* Footer */

    .footer_container{
        padding:3rem 1.5rem;
    }

    .footer_box{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:45px;
    }

    .footer_right_box{
        flex-direction:column;
        gap:30px;
    }

    .footer_left_box,
    .quick_access,
    .stay_connected,
    .legal{
        align-items:center;
    }

    /* Footer */

}



/* ===========================
   SMALL MOBILE (480px)
=========================== */

@media (max-width:480px){

    .hero-title{
        font-size:28px;
    }

    .hero-description{
        font-size:16px;
    }

    #talktome{
        width:90px;
        height:36px;
        font-size:14px;
    }

    .footer_container{
        padding:2.5rem 1rem;
    }

}
/* Responsive end */