html{
    scroll-behavior: smooth;
}


body{
    background-color: rgb(234, 221, 221);
    font-weight: 400;
    font-family:Arial, Helvetica, sans-serif ;
    color: rgb(40, 33, 33);
    overflow-x: hidden;
   
}

p{
    margin-bottom: 0.5rem;
}










.flex_end{
    justify-content: flex-end;
}

.display_flex{
    display: flex;
}

.flexdirection_r{
    flex-direction: row;
}
.justify_center{
    justify-content: center;
}

.space_around{
    justify-content: space-around;
}



.text_center{
    text-align: center;
}








.img_style2{
    box-shadow: 0px 0px 15px rgba(51, 50, 50, 0.5);
    border-radius: 16px;
    height: 100%;
    padding: 10px;
    width: 100%;
}



.img_style{
   
    box-shadow: 0px 0px 15px rgba(51, 50, 50, 0.5);
    height: 50%;
    transition: transform 0.8s;
    object-fit: cover;
    width:100%
 }

 .wrapper{
    height: 50%;
    overflow: hidden;
    border-radius: 16px;
 }

 .img_style:hover {
    transform: scale(1.5);
 }

 .ourwork{
   color: brown;
 }

 .transition{
    transition: transform 0.8s;
    
 }







 .hero_ctn{
    width: 100%;
    height: 720px;
   
    
}

.hero_img{
   
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}









 










 #main_nav{
    position: fixed;
    z-index: 1;
    width: 100%;
 } 



.blur_effect{
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%);
    -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%);
}

.navbar .blur_effect{

    padding: 20px;
    top: 0;
    left: 0;
    right: 0;
    
}



.nav-link{
    text-decoration: none;
    color: rgb(14, 11, 11);
    text-align: left;
    margin-inline: 25px;
    font-size: larger;
    display: inline;

}



.txt_hover{
   
    color: rgb(234, 221, 221);
    
   
}

.txt{
    font-size: 70px;
    font-weight: 400;
}

.txt2{
    font-size: 110px; 
    font-weight: 400;
    margin-bottom: -1rem;
    display: block;
}

.txt3{
    font-size: 1.35rem;
   
}

.txt_shadow{
    text-shadow:4px 4px 4px #142737;
}








.bg_black{
    background-color: rgb(13, 13, 19);
    
}

.bg_black_light{
    background-color: rgba(13, 13, 19, 0.446);
    
}

.bg_gold{
    background-color:  rgb(170 149 56);
    
}

.bg_pink{
    background-color: rgb(255 73 184);
    
}

.box_shadow{
    box-shadow: 0px 0px 15px rgba(51, 50, 50, 0.5);
}

.text_gold{
    color: rgb(170 149 56)
}

.text_pink{
    color: rgb(255 73 184);
}




.bg_light{
    background-color: azure;
}


.color_az{
    color: azure;
}






hr{
    border-top: 1px solid rgb(170 149 56);
}






.hero_text{
   
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}



.hero_text2{
   
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 70px;
    margin-bottom: -0.8rem;

}

.my_hero_txt{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-left: -2rem;
    z-index: 1;
}







.mx_0{
    margin-left: 0%;
    margin-right: 0%;
}

.mb_100{
    margin-bottom: 100px;
}













.link_style:hover{
    text-decoration: none;
    color: rgb(111, 88, 88);
    font-size: 20px;
}

.link_style{
    text-decoration: none;
    color: rgb(12, 13, 13);
    font-size: 20px;
    
}


.link_style2{
    text-decoration: none;
    color: black;
}

.link_style2:hover{
    text-decoration: none;
    color: white;
}

.link_style3{
    text-decoration: none;
    color: rgb(106, 106, 106);
}

.link_style3:hover{
    text-decoration: none;
    color: rgb(55, 55, 55);
}


.link_style4{
    text-decoration: none;
    color: azure;
}

.link_style4:hover{
    text-decoration: none;
    color: rgb(168, 176, 176);
}









/*icons*/

.fa-whatsapp, .fa-map-marker-alt, .fa-mobile-alt, .fa-instagram, .fa-facebook, .fa-linkedin{
    font-size: 25px;
    color: rgb(170 149 56)
}

.fa-whatsapp:hover{
    font-size: 25px;
    color: rgb(247, 215, 68)
} 


.fa-map-marker-alt:hover{
    font-size: 25px;
    color: rgb(247, 215, 68)
} 


.fa-mobile-alt:hover{
    font-size: 25px;
    color: rgb(247, 215, 68)
} 



.fa-instagram:hover{
    font-size: 25px;
    color: rgb(247, 215, 68)
}


.fa-facebook:hover{
    font-size: 25px;
    color: rgb(247, 215, 68)
}


.fa-linkedin:hover{
    font-size: 25px;
    color: rgb(247, 215, 68)
}






.icon{
    font-size: 25px;
    color: rgb(12, 12, 10)
} 

.icon:hover{
    font-size: 25px;
    color: rgb(115, 115, 101)
} 











.d_block{
    display: block;
}







.pt_6r{
    padding-top: 6rem;
}

.pb_3r{
    padding-bottom: 3rem;
}

.mb_200{
    margin-bottom: 200px;
}

.mb_100{
    margin-bottom: 100px;
}


/*media q*/


@media (min-width: 768px){
    .px_desk_5{
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .hero_text{
        margin-left: 40px;
    }


    
    .my_desk_7{
        margin-top: 7rem;
        margin-bottom: 7rem;
    }

    

    .hero_size{
        font-size: 6.25rem;
    }

}



.hero_collinzo{
    margin-top: 13rem;
    margin-bottom: 13rem;
}




@media (max-width: 768px){
    .mt_mob_3{
        margin-top: 3rem;
    }

    .mt_mob_2{
        margin-top: 2rem;
    }

    .mt_mob_1{
        margin-top: 1rem;
    }

    .mb_mob_2{
        margin-bottom: 2rem;
    }

    .mb_mob_4{
        margin-bottom: 4rem;
    }

    .hero_text2{
        font-size: 50px;
    }

    .txt2{
        font-size: 70px;
    }

    .txt{
        font-size: 50px;
    }

    

    .txt_mobi_hover2{
        margin-top: 6rem;
    }



    .h3_mob_1{
        font-size: 1.5rem;
    }

    .text_left_mobi{
        text-align: left;
    }

    .mob_br{
        display: inline-block;
    }



    .hero_collinzo{
        margin-top: 14rem;
        margin-bottom: 14rem;
    }

    
    .hero_size {
        font-size: 2.75rem;
    }


}

































/* Style utility */

.m_1{
    margin: 1rem;
}

.mt_1,
.my_1{
    margin-top: 1rem;
}

.mb_1,
.my_1{
    margin-bottom: 1rem;
}

.ml_1,
.mx_1{
    margin-left: 1rem;
}

.mr_1,
.mx_1{
    margin-right: 1rem;
}



.m_2{
    margin:2rem;
}

.mt_2,
.my_2{
    margin-top: 2rem;
}

.mb_2,
.my_2{
    margin-bottom: 2rem;
}

.ml_2,
.mx_2{
    margin-left: 2rem;
}

.mr_2,
.mx_2{
    margin-right: 2rem;
}



.m_3{
    margin: 3rem;
}

.mt_3,
.my_3{
    margin-top: 3rem;
}

.mb_3,
.my_3{
    margin-bottom: 3rem;
}

.ml_3,
.mx_3{
    margin-left: 3rem;
}

.mr_3,
.mx_3{
    margin-right: 3rem;
}


.m_4{
    margin: 4rem;
}

.mt_4,
.my_4{
    margin-top: 4rem;
}

.mb_4,
.my_4{
    margin-bottom: 4rem;
}

.ml_4,
.mx_4{
    margin-left: 4rem;
}
.mr_4,
.mx_4{
    margin-right: 4rem;
}

.m_5{
    margin: 5rem;
}

.mt_5,
.my_5{
    margin-top: 5rem;
}

.mb_5,
.my_5{
    margin-bottom: 5rem;
}

.ml_5,
.mx_5{
    margin-left: 5rem;
}

.mr_5,
.mx_5{
    margin-right: 5rem;
}


.m_6{
    margin: 6rem;
}

.mt_6,
.my_6{
    margin-top: 6rem;
}

.mb_6,
.my_6{
    margin-bottom: 6rem;
}

.ml_6,
.mx_6{
    margin-left: 6rem;
}

.mr_6,
.mx_6{
    margin-right: 6rem;
}

.m_7{
    margin: 7rem;
}

.mt_7,
.my_7{
    margin-top: 7rem;
}

.mb_7,
.my_7{
    margin-bottom: 7rem;
}

.ml_7,
.mx_7{
    margin-left: 7rem;
}

.mr_7,
.mx_7{
    margin-right: 7rem;
}

.m_8{
    margin: 8rem;
}

.mt_8,
.my_8{
    margin-top: 8rem;
}

.mb_8,
.my_8{
    margin-bottom: 8rem;
}

.ml_8,
.mx_8{
    margin-left: 8rem;
}

.mr_8,
.mx_8{
    margin-right: 8rem;
}

.m_9{
    margin: 9rem;
}

.mt_9,
.my_9{
    margin-top: 9rem;
}

.mb_9,
.my_9{
    margin-bottom: 9rem;
}

.ml_9,
.mx_9{
    margin-left: 9rem;
}

.mr_9,
.mx_9{
    margin-right: 9rem;
}

.m_10{
    margin: 10rem;
}

.mt_10,
.my_10{
    margin-top: 10rem;
}

.mb_10,
.my_10{
    margin-bottom: 10rem;
}

.ml_10,
.mx_10{
    margin-left: 10rem;
}

.mr_10,
.mx_10{
    margin-right: 10rem;
}



.p_1{
    padding: 1rem;
}

.pt_1,
.py_1{
    padding-top: 1rem;
}

.pb_1,
.py_1{
    padding-bottom: 1rem;
}

.pl_1,
.px_1{
    padding-left: 1rem;
}

.pr_1,
.px_1{
    padding-right: 1rem;
}

.p_2{
    padding: 2rem;
}

.pt_2,
.py_2{
    padding-top: 2rem;
}

.pb_2,
.py_2{
    padding-bottom: 2rem;
}

.pl_2,
.px_2{
    padding-left: 2rem;
}

.pr_2,
.px_2{
    padding-right: 2rem;
}

.p_3{
    padding: 3rem;
}

.pt_3,
.py_3{
    padding-top: 3rem;
}

.pb_3,
.py_3{
    padding-bottom: 3rem;
}

.pl_3,
.px_3{
    padding-left: 3rem;
}

.pr_3,
.px_3{
    padding-right: 3rem;
}

.p_4{
    padding: 4rem;
}

.pt_4,
.py_4{
    padding-top: 4rem;
}

.pb_4,
.py_4{
    padding-bottom: 4rem;
}

.pl_4,
.px_4{
    padding-left: 4rem;
}

.pr_4,
.px_4{
    padding-right: 4rem;
}

.p_5{
    padding: 5rem;
}

.pt_5,
.py_5{
    padding-top: 5rem;
}

.pb_5,
.py_5{
    padding-bottom: 5rem;
}

.pl_5,
.px_5{
    padding-left: 5rem;
}

.pr_5,
.px_5{
    padding-right: 5rem;
}

.p_6{
    padding: 6rem;
}

.pt_6,
.py_6{
    padding-top: 6rem;
}

.pb_6,
.py_6{
    padding-bottom: 6rem;
}

.pl_6,
.px_6{
    padding-left: 6rem;
}

.pr_6,
.px_6{
    padding-right: 6rem;
}

.p_7{
    padding: 7rem;
}

.pt_7,
.py_7{
    padding-top: 7rem;
}

.pb_7,
.py_7{
    padding-bottom: 7rem;
}

.pl_7,
.px_7{
    padding-left: 7rem;
}

.pr_7,
.px_7{
    padding-right: 7rem;
}

.p_8{
    padding: 8rem;
}

.pt_8,
.py_8{
    padding-top: 8rem;
}

.pb_8,
.py_8{
    padding-bottom: 8rem;
}

.pl_8,
.px_8{
    padding-left: 8rem;
}

.pr_8,
.px_8{
    padding-right: 8rem;
}

.p_9{
    padding: 9rem;
}

.pt_9,
.py_9{
    padding-top: 9rem;
}

.pb_9,
.py_9{
    padding-bottom: 9rem;
}

.pl_9,
.px_9{
    padding-left: 9rem;
}

.pr_9,
.px_9{
    padding-right: 9rem;
}

.p_10{
    padding: 10rem;
}

.pt_10,
.py_10{
    padding-top: 10rem;
}

.pb_10,
.py_10{
    padding-bottom: 10rem;
}

.pl_10,
.px_10{
    padding-left: 10rem;
}

.pr_10,
.px_10{
    padding-right: 10rem;
}


/* End style utility */




/* 



.sos.sos_btm{
    position: relative;
    transform: translateY(2.5rem);
    opacity: 0;
    transition: var(--ease-2);
    will-change: transform, opacity;
}

.sos.is_sos, .sos_btm.is_btm{
    transform: translateY(0px);
    opacity: 1;
}



.sos_top{
    position: relative;
    transform: translateY(-2.5rem);
    opacity: 0;
    transition: var(--ease-2);
    will-change: transform, opacity;
}

.sos_top.is_top{
    transform: translateY(0px);
    opacity: 1
}



 */