html{
    overflow-x: hidden;
}

*{
    color: rgb(43, 43, 73) !important;
}

body{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}


#mainnavbar{
    background-image: url(https://itemsstore.net/html/trito/img/hero/1.jpg);
    border-bottom: 1px solid black;
}
 
#navbarimg{
    margin-left: 200px;
}

#navbarul{
    margin-left: 170px;
    font-size: 18px;
}

li{
    margin: 0px 20px;
}

#home{
    color: orange;
}
#navbarbutton{
background-color: rgb(49, 49, 122);
color: white   !important;
/* margin-left: 100px; */
margin-right: 30px;
padding: 10px 30px 10px 20px;
}
#navbarbutton:hover{
    color: rgb(49, 49, 122) !important;
    background-color: white !important;
}

@media(max-width:1441px){
    #navbarul{
        margin-left: 100px;
    }
} 


@media(max-width:1280px){
    #navbarul{
        margin-left: 70px;
    }

    /* #hero-div-image{
        margin-bottom: 0%;
        position: absolute;
        padding: 0px 0px 0px 0px ;
    } */

    #navbarbutton{
        width: 10rem;
    }
} 

@media(max-width:1068px){
    #navbarul{
        margin-left: 20px;
    }
} 



@media(max-width:1116px){
    #navbarul{
        margin-left: 0px;
        /* width: 100%; */
    }
}

@media (max-width: 1213px) and (min-width: 993px) {
    #main-hero {
        padding: 10% 5% 0% 5%;
    }

    #navbarul {
        margin-left: 30px;
    }

    #navbarimg {
        margin-left: 50px;
    }

    #navbarbutton {
        margin-right: 10px;
    }
}


@media(max-width:992px){
    #mainnavbar{
    background: white;
    }

    #navbarul{
        margin-left: 0px;
    }
    #navbarbutton{
        background-color: rgb(49, 49, 122);
        color: white;
        margin-left: 0px;
        padding: 10px 20px 10px 20px;
        }
        #navbarbutton:hover{
            color: rgb(49, 49, 122);
            background-color: white;
        }
      #navbarimg{
        margin-left: 0%;
      }
} 
/* 1110 to 992  */

@media (min-width:992px )  and (max-width: 1108px) {
    #mainnavbar{
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
    #navbarbutton{
        width: 10rem;
    }
}


/* ==============================================end navbar session====================================================== */



 /* ============================================== start hero session====================================================== */

 #main-hero{
    background-image: url(https://itemsstore.net/html/trito/img/hero/1.jpg);
    padding: 15% 10% 0% 10%;
    /* padding: 0%; */
 }




#navbarbutton1{
    background-color: white;
    color:  rgb(49, 49, 122)  !important;
    padding: 10px 20px 10px 20px;
    margin-right: 1rem;
    }
    #navbarbutton1:hover{
        color: white !important;
        background-color:rgb(49, 49, 122) !important;
    }

#para{
    display: inline-block;
    margin-left: 3rem;
}

@media (max-width: 1493px) {
    #hero-div-img {
        display: flex;
        align-items: center;
        justify-content: center; 
    }
    
    #img-hero {
        max-width: 100%; 
        height: auto; 
    }

}

/* =======================================================END HERO  SECTION========================================= */


/* ======================================================= CLIENT SECTION========================================= */
#client-main{
    margin-top: 0%;
    background-color: rgb(32, 32, 84) !important;
    color: white!important;
    font-size: 20px;
    padding-top: 3.5rem;
    font-weight: 700;

}

#client-image{
    background-color: rgb(32, 32, 84) !important;
    display: flex;
}

#client-img image-client ,image-client1,image-client6{
margin: 10%;
}

#image-client{
    margin: 3rem;
}

/* ====================DEDICATION==================*/
#card-dedication{
    margin: 5%;
}

#main-dedication{
     padding: 0% 5%  0% 5%;
}

/* ====================MY SKILLS=================== */
#myskills-main{
    width: 100%;
 padding:  5% 10% 5% 10%;
}

#myskills-div1{
    padding: 5%;
}

#myskills-div2{
    background-image: url(https://itemsstore.net/html/trito/img/skills/1.jpg);
    padding: 5%;
    display: grid;
    grid-template-columns: auto auto auto;
}

#divbox1{
    border: 2px solid rgb(49, 55, 86);
    font-weight:700;
    padding: 10px;
    background-color: white;
    margin: 20px;
    text-align: center;
    width: 100px;
}

/* @media(max-width:1251px)and (min-width:768){
    #myskills-div2{
        background-image: url(https://itemsstore.net/html/trito/img/skills/1.jpg);
        padding: 2%;
        display: grid;
        grid-template-columns: auto auto auto;    
    }
} */

@media (max-width: 12px) and (min-width: 768px) {
    #myskills-div2 {
        background-image: url(https://itemsstore.net/html/trito/img/skills/1.jpg);
        width: 50%;
        padding: 2%;
        display: grid;
        grid-template-columns: auto auto auto;    
        background-size: cover;  /* Ensures the image covers the entire area */
        background-position: center;  /* Centers the image */
        background-repeat: no-repeat;  /* Prevents the image from repeating */
    }
    #divbox1{
        border: 2px solid rgb(49, 55, 86);
        font-weight:700;
        padding: 10px;
        background-color: white;
        margin: 20px;
        text-align: center;
        width: 80px;
    }
    
}


/* <!--================================= FAQ============================== --> */
#main-faq{
padding: 10%;
}

.accordion-button::after {
    background-color: #198754 !important; /* Bootstrap success green */
    border-radius: 0%; /* Makes the background rounded */
    padding: 5px; /* Adjust padding if necessary */
}

#FAQ1{
    margin: 2%;
    /* background-color: blue !important; */
}