/* ========= Font Link Part Start ========= */
@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



/* ------------ Font Link Part End ------------ */
/* ========= Common CSS Part Start ========= */
*{
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
ul, ol{
    list-style: none;
}
a{
    display: inline-block;
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6, ul, ol, p{
    margin: 0;
    padding: 0;
    outline: 0;
}

.common_heading h4{
    font-size: 24px ;
    font-weight: 600;
    font-family: var(--titillium);
    color: black !important;
    text-align: center;
}
.common_heading h3{
    font-size: 32px ;
    font-weight: 600;
    font-family: var(--titillium);
    color: #eee;
    text-align: center;
    text-transform: uppercase;
}
.common_heading h3 span{
    color: var(--brand-color);
}
.common_heading p{
    font-size: 18px ;
    font-weight: 400;
    font-family: var(--titillium);
    color: #eee;
    text-align: center;
    margin-top: 24px;
    margin-bottom: 24px;
}
.common_heading p::first-letter{
    color: var(--brand-color);
}
.common_heading p span{
    display: block;
}
.common_heading p span::first-letter{
    color: var(--brand-color);
}


/* ------------ Common CSS Part End ------------ */
/* ========= Variable Part Start ========= */
:root{
    --primary-color: #222222;
    --brand-color: #FF5733;
    --brand-aux: #00191F; 
    --titillium: 'Poppins', sans-serif;
    --brand-font: 'Alumni Sans', sans-serif;
}
/* ------------ Variable Part End ------------ */
/* =========== back to top button start ============== */
.top_button{
    height: 50px;
    width: 50px;
    background: var(--brand-aux);
    border-radius: 50px;
    font-size: 18px;
    color: var(--brand-color);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s all linear;
    /* border: 3px solid var(--brand-color); */
    position: fixed;
    bottom: 10%;
    right: 5%;
    z-index: 999;
    visibility: hidden;
    opacity:0;
}
.top_button:hover{
    background: var(--brand-color);
    color: var(--brand-aux);
    cursor: pointer;
    scale: 1.2;
}
.go_top{
    visibility: visible;
    opacity: 1;
    animation: came_top 1s;
}
@keyframes came_top{
    from{
        bottom: -10%;
    }
    to{
        bottom: 10%;
    }
}

/* ============ navbar =================*/

.navbar-collapse,
.navbar-brand .logo{
    /* margin-left: -20px; */
    width: 80px !important;
}

.navbar-dark{
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;;
    background-color: rgba(0, 25, 31, 0.55);
}


/* ------------ back to top button end */
.navbar-toggler
{
    border: 0;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus
{
    outline: none;
    box-shadow: none;
    border: 0;
}
.toggler-icon
{
    width: 30px;
    height: 3px;
    display: block;
    transition: all 0.25s;
    border-radius: 3px;
}
.middle-bar
{
    margin: 5px auto;
}
.navbar-toggler .top-bar
{
    transform: rotate(45deg);
    transform-origin: 10% 100%;
    background-color: pink;
}
.navbar-toggler .middle-bar
{
    background: var(--brand-color);
    opacity: 0;
}
.navbar-toggler .bottom-bar
{
    transform: rotate(-45deg);
    transform-origin: 20% 20%;
    background-color: red;
}
.collapsed .top-bar
{
    transform: rotate(0);
}
.collapsed .middle-bar
{
    opacity: 1;
    transform: rotate(0);
}
.collapsed .bottom-bar
{
    transform: rotate(0);
}






/* ========= Menubar Part Start ========= */
.menubar{
    background-color: var(--brand-aux);
}
.menubar .logo{
    width: 80px !important;
}
.menu_item li{
    padding: 0 12px;
    text-transform: uppercase;
    color: rgb(231, 231, 231);
}

.menu_item li a{
    font-size: 14px ;
    font-weight: 600;
    font-family: var(--titillium);
    color: whitesmoke;
    transition: 0.2s all linear;
    text-align: center;
    display: block;
    position: relative;
}

.menu_item:hover li a{
    transform: scale(1.15);
    opacity: 0.3;
}
.menu_item li a:hover{
    color: whitesmoke;
    transform: scale(1.25);
    opacity: 1;
}

.menu_item li a:before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:var(--brand-color);
    color: whitesmoke !important;
    transition:0.5s;
    transform-origin:right;
    transform:scaleX(0);
    z-index: -1;
}

.menu_item li a:hover:before{
    transition: transform .65s;
    transform-origin:left;
    transform:scaleX(1);
}

.sticky_navbar{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    animation: nav_ani 1s;
}


.get_button a {
    width: 100px;
    height: 36px;
    /* padding: 10px 00px 10px 0px; */
    background: var(--brand-color);
    border-radius: 2;
    font-size: 18px;
    font-weight: 500;
    /* font-family: var(--titillium); */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.25s all linear;
    margin: 0 auto;
}





.get_button a:hover {
    color: white;
    font-weight:400;
    transform: scale(1.2);
}

@keyframes nav_ani{
    from{
        top: -10%;
    }
    to{
        top: 0;
    }
}

/* ------------ Menubar Part End ------------ */
/* =========Banner Part Start ========= */
#banner {
    width: 100%;
    background: url(../images/banner_bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 132px 50px;
    margin-top: 0;
    animation: myAnim 3s cubic-bezier(0.33, 1, 0.68, 1) 1s 1 normal both;
    z-index: -1;
    position: relative;
    &:before {
        content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-image: linear-gradient(to right,#00191f,#00000000);
            opacity: .6;
            z-index: -1;
}
}
@keyframes myAnim {
	0% {
		background-position: left center;
		background-size: 100%;
	}

	100% {
		background-position: left center;
		background-size: 120%;
	}
}



#banner2 {
    width: 100%;
    background: url(../images/home-2-img-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 150px 50px;
}

.banner_text h1 {
    font-size: 140px;
    font-weight: 800;
    font-family: var(--brand-font);
    color: #eee;
    margin: 0 auto;
    line-height: 100px;
    text-shadow: #000000 4px 4px 4px;
    line-height: normal;
    margin-top: -20px;
    font-style: italic;
    animation: text-pop-up-right 2s ease-in-out 0.3s reverse both;
}

.banner_text h1 span{
    color: var(--brand-color);
    text-shadow: #000000 4px 4px 4px;
    font-weight: 800;
    font-style: italic;
    -webkit-animation: text-pop-up-right 2s ease-in-out 0.3s reverse both;
    animation: text-pop-up-right 2s ease-in-out 0.3s reverse both;
}
@keyframes text-pop-up-right {
        0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        -webkit-transform-origin: 50% 50%;
                transform-origin: 50% 50%;
        }
            100% {
            -webkit-transform: translateX(50px);
                    transform: translateX(50px);
            -webkit-transform-origin: 50% 50%;
                    transform-origin: 50% 50%;
                    text-shadow: none;
            }
        }


.banner_text h2 span{
    color: var(--primary-color);
}
.banner_text h3{
    font-size: 32px;
    font-weight: 600;
    font-family: var(--titillium);
    color: whitesmoke !important;
    text-shadow: #000000 4px 4px 4px;
}

.banner_text h4{
    font-size: 24px;
    font-weight: 700;
    font-family: var(--titillium);
    color: whitesmoke;
    margin-top: 20px;
    text-shadow: #000000 2px 2px 2px;
}

.banner_text p{
    width: 400px;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--titillium);
    color: whitesmoke;
    margin-top: 3px;
    text-shadow: rgb(0, 0, 0) 2px 2px 2px;
    /* margin-left: 10px; */
}
.banner_button a{
    width: 160px;
    height: 40px;
    background: var(--brand-color);
    border-radius: 2;
    font-size: 20px;
    font-weight: 400;
    font-family: var(--titillium);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px ;
    /* margin-left: 10px; */
    transition: 0.2s all linear;
}
.banner_button a:hover{
    color: white;
    font-weight: 500;
    transform: scale(1.2);
}

.banner_button1 a{
    width: 220px;
    height: 48px;
    background: var(--brand-color);
    border-radius: 2;
    font-size: 20px;
    font-weight: 400;
    font-family: var(--titillium);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 32px ;
    /* margin-left: 10px; */
    transition: 0.2s all linear;
}
.banner_button1 a:hover{
    color: white;
    font-weight: 500;
    transform: scale(1.2);
}


/* ------------ Banner Part End ------------ */
/* =========Banner Part Start ========= */
#banner1{
    width: 100%;
    background: url(../images/banner_bg1.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 40px 0;
}

.banner1_text {
    text-align: center;
}

.banner1_text h1{
    text-align: center;
    font-size: 80px;
    font-weight: 800;
    font-family: var(--titillium);
    color: var(--brand-color);
    margin:10px 0 5px 0;
    text-shadow: #000000 4px 4px 4px;
}

.banner1_text h1 span{
    color: white;
    text-shadow: #8f8f8f 4px 4px 4px;
}

.banner1_text h2 span{
    color: var(--primary-color);
}
.banner1_text h3{
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    font-family: var(--titillium);
    color: whitesmoke !important;
    text-shadow: #000000 4px 4px 15px;
}

.banner1_text h4{
    font-size: 24px;
    font-weight: 700;
    font-family: var(--titillium);
    color: whitesmoke;
    margin-top: 30px;
    text-align: center;

    text-shadow: #000000 2px 2px 2px;
}

.banner1_text p{
    font-size: 16px;
    font-weight: 400;
    font-family: var(--titillium);
    color: whitesmoke;
    text-align: center;
    margin-top: 8px;
    text-shadow: rgb(0, 0, 0) 2px 2px 2px;
}



/* ================== Extra ================== */

#banner .sidenav {
    display: grid;
    z-index: 3;
    position: absolute;
    top: 20.2%;
    right: 7.5%;
    padding: 30px;
    height: 384px;
    width: 382px;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background-color: rgb(0 25 31 / 77%);
    backdrop-filter: blur(25px);
}

.sidenav h3 {
    color: snow;
    font-size: 32px;
    text-align: center;
    text-shadow: #000000 2 2 4px;
}
.sidenav h3 span{
    color: var(--brand-color);
    font-weight: 400;


}
.sidenav p {
    color: snow;
    font-size: 18px;
    font-weight: 400;
    padding: 10px 20px;
    margin-top: 10px;
    text-shadow: #000000 2 2 2;
    text-align: justify;
}
.sidenav p span {
    color: var(--brand-color);
    font-weight: 500;
}

.sidenav .navbtn{
    top: 0;
    left: 0;
    position: relative;
    font-size: 18px;
    font-weight: 500;
    max-width: 370px;
    height: 60px;
    place-items: center;
    background-color: #ff8c00;
    /* margin-bottom: 25%; */
    padding: 10px 40px;
    text-align: center;
    line-height: 40px;
    color: azure;
}





/* =============== Contact Page =============== */
#banner2 .sidenav {
    display: grid;
    z-index: 3;
    position: absolute;
    top: 30.5%;
    right: 7.5%;
    padding: 38px;
    height: 330px;
    width: 382px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 1rem 0px;
    border-radius: 5px;
    background-color: rgb(0 25 31 / 77%);
    backdrop-filter: blur(25px);
}

.sidenav h3 {
    color: snow;
    font-size: 32px;
    text-align: center;
    text-shadow: #000000 2 2 4px;
}
.sidenav h3 span{
    color: var(--brand-color);
    font-weight: 400;

    
}
.sidenav p {
    color: snow;
    font-size: 18px;
    font-weight: 400;
    padding: 10px 20px;
    margin-top: 10px;
    text-shadow: #000000 2 2 2;
    text-align: justify;
}
.sidenav p span {
    color: var(--brand-color);
    font-weight: 500;
}

.sidenav .navbtn{
    top: 0;
    left: 0;
    position: relative;
    font-size: 18px;
    font-weight: 500;
    max-width: 370px;
    height: 60px;
    place-items: center;
    background-color: var(--brand-color);
    padding: 10px 40px;
    text-align: center;
    line-height: 40px;
    color: azure;
}

/* ================== contact information ================= */


/* ================== contact information ================= */

#contacts {
    width: 100%;
    padding: 40px 0;
    /* background: linear-gradient(17deg, rgba(0,82,83,1) 0%, rgba(0,25,31,1) 100%); */
    background: url(../images/bg3.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.row3{
    display: flex;
    flex-wrap: wrap;
}
.headline h1{
    color:#eee;
    padding: 12px 0 8px 0;

    font-size: 44px;
}
.headline p{
    color:#eee;
    padding: 0 0 32px 5px;
}
.contacts_text i{
    color: #ffffff;
    padding: 20px 2px;
}
.contacts_text{
    background: var(--brand-aux);
    background-size: cover;
    display: grid;
    padding: 24px 0;
    text-align: left;
    width: 431px;
    padding-left: 24px;
}

.contacts_text h3{
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
    color: #eee;
}

.contacts_text p{
    font-size: 12px;
    /* padding: 10px 0; */
    text-align: left;
    color: #eee;
}

.contacts_text a{
    font-size: 14px;
    padding: 10px 0;
    text-align: left;
    color: #eee;
    margin-bottom: 10px;
    text-decoration: underline;
}
.google_map{
    max-width: 854px;
    margin-left: 10px;
}
.google_map iframe{
    border: #00191F 5px solid;
    border-radius: 5px;
}


/* ================== contact information ================= */


/* ================= crm1 part start ================== */
#crm1 {
    width: 100%;
    padding: 40px 0;
    /* background: linear-gradient(262deg, rgba(0,82,83,1) 0%, rgba(0,25,31,1) 100%); */
    background: url(../images/BC.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.coltext {
    background: var(--brand-aux);
    display: grid;
    max-height: 648px;
    margin-left: 10px;
    max-width: 854px;
}

.coltext h1{
    font-size: 64px;
    margin-top: 20px;
    text-align: right;
    padding-left: 65px;
    color: #eee;
    padding-right: 64px;
}
.coltext h1 span{
    background-color: var(--brand-color);
}
.coltext h5 {
    font-size: 36px;
    /* margin-top: 7px; */
    text-align: right;
    color: var(--brand-color);
    padding-right: 64px;
    line-height: 0;
    margin-top: -40px;
}

.coltext p {
    font-size: 36px;
    color: antiquewhite;
    text-align: center;
    /* padding: 10px 20px 20px 10px;
    align-self: center; */
    justify-self: center;
}

#crm1 .row2{
    display: flex;
    flex-wrap: nowrap;
}

.coltext .crmbtn{
    justify-self: center;
}

.coltext .crmbtn a {
    width: 200px;
    height: 64px;
    font-size: 20px;
    font-weight: 400;
    font-family: var(--titillium);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s all linear;
    border: #eee 2px solid;
    justify-self: center;
    align-self: center;
}


.coltext .crmbtn a:hover{
    color: white;
    font-weight: 500;
    transform: scale(1.1);
    background: var(--brand-color);
}



.row2 .imga img {
    max-width: 432px;
    background-repeat: no-repeat;
}


/* ================= crm1 part end ================== */





/* =============== Contact Page =============== */


/* ================== Extra ================== */
@media only screen and (max-width: 992px) {
    .sidenav{
        visibility: hidden;
    }
}

@media only screen and (max-width: 576px) {
    .imga{
        visibility: hidden;
    }
}



/* ------------ Banner Part End ------------ */


/* ========= Tools Part Start ========= */
#tools{
    width: 100%;
    /* background: linear-gradient(90deg, rgba(0,82,83,1) 0%, rgba(0,25,31,1) 100%); */
    background: url(../images/BC.png);
    padding: 120px 0;
    background-size: cover;
    background-repeat: no-repeat;
    /* height: 100%; */
}
.tools_cards{
    margin-top: 80px;
    display: flex;
    justify-content: center;
    
}
.tools_item .tools_text{
    text-align: center;
}

.tools_text {
    display: grid;
    grid-auto-flow: column dense;
    grid-auto-columns: 1fr;
    grid-auto-rows: 1fr;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px 0px;
    grid-template-areas:
        "h3"
        "p";
    justify-content: center;
    align-content: space-around;
    justify-items: center;
    align-items: center;
}

.tools_item {
    width: 300px;
    color: #555;
    height: 250px;
    background: #eaeaea;
    padding: 18px;
    border-radius: 5px;
    transition: 0.25s all linear;
    cursor: pointer;
    display: grid;
    -webkit-box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.5);
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.5);
}
.tools_item:hover{
    background: var(--brand-color);
    transform: scale(1.1);
    color: whitesmoke;
}

.tools_item .tools_text p{
    font-size: 18px;
    font-weight: 400;
    font-family: var(--titillium);
    text-align: center;
    /* margin-top: 22px; */
    transition: 0.2s all linear;
    align-self: baseline;
    /* margin-bottom: 1.5rem; */
    
}


/* ------------ Tools Part End ------------ */
/* ========= Features Part Start ========= */
#features{
    width: 100%;
    background: #00191F;
    padding: 80px 0;
}
.feature_slider{
    position: relative;
}

.feature_slider .feature_slider_item{
    width:90%;
    padding: 40px 40px 40px 40px ;
    border-radius: 0;
    background: #ebebeb;
    border-radius: 20px;
    -webkit-box-shadow: 21px 28px 51px -15px rgba(0,25,31,1);
-moz-box-shadow: 21px 28px 51px -15px rgba(0,25,31,1);
box-shadow: 21px 28px 51px -15px rgba(0,25,31,1);
}
.feature_slider_img img{
    height: 240px;
    border-radius: 10px;
}
.feature_text{
    padding: 20px;
    color: #eee;
}
.feature_slider_item .feature_text h3{
    font-size: 25px;
    font-weight: 500;
    font-family: var(--titillium);
    line-height: 24px;
    text-align: center;
    color: #00191F;
    margin-top: 16px;
}
.feature_slider_item .feature_text p{
    width:100%;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--titillium);
    line-height: 30px;
    color: #00191F;
    margin: 20px 0;
    text-align:justify;
}
.feature_button a{
    width: 90% ;
    height: 35px;
    background: var(--primary-color);
    border-radius: 20px;
    font-size: 18px;
    font-weight: 400;
    font-family: var(--titillium);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.slick-center{
    /* box-shadow: -15px -15px 15px rgba(255,255,255,0.2), 15px 15px 15px rgba(0,0,0,0.1), inset -5px -5px 5px rgba(255,255,255,0.2), inset 5px 5px 5px rgba(0,0,0,0.1); */
    border-radius: 24px;
    margin-bottom: 50px;
}
.slick-center .feature_button a{
    background: var(--brand-color);
    /* box-shadow: -15px -15px 15px rgba(255,255,255,0.2), 15px 15px 15px rgba(0,0,0,0.1), inset -5px -5px 5px rgba(255,255,255,0.2), inset 5px 5px 5px rgba(0,0,0,0.1); */
}
.prevarrow, .nextarrow{
    height: 40px;
    width: 40px;
    background: var(--primary-color);
    color: var(--brand-color);
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    position: absolute;
    z-index:999;
    top: 50%;
    opacity: 0;
    visibility: 0;
    transition: 0.3s all linear;
}
.nextarrow{
    right: 0;
}
.feature_slider:hover .prevarrow,
.feature_slider:hover .nextarrow{
    opacity: 1;
    visibility: visible;
}
/* ------------ Features Part End ------------ */

/* ========= Works Part Start ========= */
#works{
    width: 100%;
    padding: 100px 0;
    /* background: linear-gradient(200deg, rgba(0,82,83,1) 0%, rgba(0,25,31,1) 100%); */
    background: url(../images/bg5.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.works_text_item{
    width: 445px ;
    display: flex;
    margin-top: 44px;
    margin-left: 80px;
}
.works_text_item .works_number h4{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--brand-color);
    font-size: 20px;
    font-weight: 600;
    font-family: var(--titillium);
    color: #FFFFFF;
    text-align: center;
    line-height: 30px;
}
.works_text_item p{
    width: 350px;
    font-size: 20px;
    font-weight: 400;
    font-family: var(--titillium);
    color: #FFFFFF;
    padding-left: 10px;
}
.works_text_item p span{
    display: block;
}
.works_video{
    width: 550px;
    padding-top: 24px;
    display: flex;
    justify-content: center;
}
.works_video video{
    width:550px;
    height:416px;
    border-radius: 30px;
}
/* ------------ Works Part End ------------ */

/* ========= Service Part Start ========= */
#downloads{
    width: 100%;
    padding: 0;
    background: url(../images/BC.png);
    background-position: 0%;
    background-size: cover;
}
.row{
    display: flex;
    align-items: center;
    justify-content: center;
}

.row .download_text a {
    margin-left: 22%;
    width: 150px;
    height: 48px;
    background: var(--brand-color);
    border-radius: 2;
    font-size: 20px;
    font-weight: 400;
    font-family: var(--titillium);
    color: #eaeaea;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    transition: 0.25s all linear;
    margin-top: -40px;
}
.download_text a:hover{
    color: #eaeaea;
    font-weight: 500;
    transform: scale(1.2);
}

.row .download_text h3 {
    font-size: 48px;
    font-weight: 600;
    font-family: var(--titillium);
    color: var(--brand-color);
    /* text-align: center;
    padding-left: 10px; */
}
.row .download_text h4 {
    font-size: 22px;
    font-weight: 500;
    font-family: var(--titillium);
    color: #eaeaea;
    padding-top: 18px;
}
.row .service{
    display: flex;
}
.row .service img {
    overflow-clip-margin: content-box;
    overflow: clip;
    margin-top: 0;
    margin-left: 0;
    position: relative;
    padding-left: 100px;
    filter: drop-shadow(-1px -1px 15px #00191f);
}


/* ------------ Service Part End ------------ */
/* ========= Footer Part Start ========= */
footer{
    width: 100%;
    padding-top: 40px;
    background: #00191f;
}
.footer_left{
    display: grid;
    justify-items: center;
    padding: 0 20px;
}

.footer_left .footer_logo img{
    height: 60px;
}
.footer_left .footer_text p{
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--titillium);
    color: snow;
    text-align: center;
    margin-top: 15px;
    text-transform: uppercase;
}
.footer_left .footer_text p span{
    display: block;
    margin-top: 50px;
}
.footer_left .footer_social_icon ul{
    width: 150px;
    margin-top: 30px;
    display: flex;
    justify-content: space-evenly;
}
.footer_left .footer_social_icon ul li a{
    font-size: 25px;
    color: snow;
    transition: 0.2s all linear;
}
.footer_left .footer_social_icon ul li a:hover{
    color: var(--brand-color);
}
.footer_menu{
    text-align: center;
    margin-top: 30px;
}
.footer_menu h4{
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: var(--titillium);
    color: snow;
}
.footer_menu ul{
    width: 100%;
    margin-top: 18px;
}
.footer_menu ul li a{
    font-size: 16px;
    font-weight: 600;
    font-family: var(--titillium);
    color: snow;
    line-height: 32px;
    text-transform: uppercase;
    transition: 0.2s all linear;
}
.footer_menu ul li a:hover{
    color: var(--brand-color);
}

.copywrite{
    width: 100%;
    height: 100px ;
    background: #000;
    margin-top: 25px;
}
.copywrite_content{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.copywrite_text h6{
    font-size: 14px;
    font-weight: 500;
    font-family: var(--titillium);
    color: #fff;
}

/* ------------ Footer Part End ------------ */


/* ====================== Carlist Start ===================== */
#carlist{
    padding: 50px 0;
    background: linear-gradient(0deg, rgba(0,82,83,1) 0%, rgba(0,25,31,1) 100%);
}

a{
    color: unset;
    text-decoration: none;
}

.content {
    display: grid;
    align-items: center;
    align-content: space-between;
}
.title {
    font-size: 48px;
    font-weight: 600;
    text-transform: uppercase;
    color: snow;
    padding-bottom: 30px;
    text-align: center;
    place-items: center;

}
.listProduct .item img{
    max-width: 100%;
    transition: 300ms all linear;
}

.listProduct .item:hover{
    transform: scale(1.05);
    /* filter: drop-shadow(10px 10px 20px rgba(98, 98, 98, 0.4)); */
}
.listProduct .item img:hover{
    transform: scale(1.2) ;
}
.listProduct{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px 20px;
}
.listProduct .item {
    background-color: rgba(0, 84, 97, 0.8);
    padding: 20px;
    border-radius: 20px;
    max-width: 100%;
    text-align: center;
    color: antiquewhite;
    filter: drop-shadow(2px 2px 5px rgba(0, 3, 3, 0.4));
}
.listProduct .item h2 {
    font-weight: 500;
    font-size: large;
    color: azure;
    font-family: var(--titillium);
}
.listProduct .item .price {
    letter-spacing: 5px;
    font-size: 18px;
    text-align: center;
    bottom: 5%;
    right: 5%
}
/* ====================== detail page  =====================*/

.detail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 24px;
    background-color: #ffffff6e;
    backdrop-filter: blur(30px);
    gap: 50px;
    text-align: left;
    padding: 40px 40px;
    /* max-height: 500px; */
}

#smproducts{
    padding: 50px 0;
    /* background: rgb(0,82,83);
    background: linear-gradient(0deg, rgba(0,82,83,1) 0%, rgba(0,25,31,1) 100%); */
    background: url(../images/BC4.png);
}

.lists h4{
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
    color: #eee;
    font-weight: 600;
    font-size: 40px;
}


.detail .image img {
    max-width: 100%;
    max-height: auto;
    transition: .3s all linear;
    justify-self: center;
    align-self: center;
}

.detail .image img:hover{
    transform: translate(-5px);
    scale: 1.15;
    filter: drop-shadow(5px solid black);
}

.detail .image{
    position: relative;
    display: grid;
}

.detail .name {
    font-size: 48px;
    font-family: var(--titillium);
    color: azure;
}
.detail .price{
    font-weight: bold;
    font-size: x-large;
    letter-spacing: 7px;
    margin-bottom: 20px;
    color: ghostwhite;
    font-family: var(--titillium);
}
.detail .buttons{
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.detail .buttons button {
    background-color: transparent;
    border: 2.5px solid ghostwhite;;
    padding: 15px 20px;
    /* border-radius: 20px; */
    font-family: 'Montserrat';
    font-size: large;
    color: ghostwhite;;
}
.detail .buttons svg{
    width: 15px;
}
.detail .buttons span{
    background-color: var(--brand-color);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-left: 20px;
}
.detail .buttons button:nth-child(2){
    background-color: transparent;
    border: 2.5px solid ghostwhite;;
    padding: 15px 20px;
    display: flex;
    font-family: 'Montserrat';
    font-size: large;
    color: ghostwhite;
    }
.detail .description {
    font-weight: 400;
    padding: 40px 10px 40px 0;
}


/* ================= crm1 part start ================== */





/* ================= custom scrollbar ================= */
::-webkit-scrollbar{
    width: 10px;
}
::-webkit-scrollbar-track{
    background: var(--brand-aux);
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(#FF8C00, #ff005d);
    border-radius: 3px;
}





/* ================= About Page Start ================== */
/* ================= About Page Start ================== */

.body_bg{
    background: url(../images/banner3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#banner3 {
    width: 100%;
    padding: 50px 50px;
    text-align: center;
}

.banner3_text h1 {
    font-size: 60px;
    font-weight: 800;
    font-family: var(--titillium);
    color: #eee;
    margin: 0 auto;
    padding-bottom: 18px;
    text-shadow: #000000 4px 4px 4px;
    font-style: italic;
}
.banner3_text h1 span{
    color: var(--brand-color);
    text-shadow: #000000 4px 4px 4px;
    font-weight: 400;
    font-style: normal;
}


#mission {
    width: 100%;
    padding: 80px 0;
    color: whitesmoke;
}

#mission .row4{
        display: flex;
        justify-content: space-between;
}

.amission{
    height: 300px;
    display: grid;
    width: 640px;
}
.astory{
    height: 300px;
    display: grid;
    width: 640px;
}

.astory p::first-letter{
    color: var(--brand-color);
    font-weight: bold;
    font-style: italic;
}
.amission p::first-letter{
    color: var(--brand-color);
    font-weight: bold;
    font-style: italic;
}

.amission {
    padding: 50px 50px;
    color: #555;
    background-color: #fff;
    border-radius: 10px;
}
.astory {
    padding: 50px 50px;
    color: #555;
    background-color: #fff;
    border-radius: 10px;
}
.whowe {
    padding: 50px 50px;
    background-color: #ff8a70;
    border-radius: 10px;
    width: 100%;
    margin-top: 20px;
}

.whowe h1{
    font-size: 24px;
    font-weight: 800;
    color: rgb(32, 30, 30);
    text-transform: uppercase;
    padding-bottom: 18px;
    text-align: left;
    filter: drop-shadow(4px 4px 10px #ff5733);
}
.whowe p{
    font-size: 16px;
    font-weight: 400;
    color: whitesmoke;
    filter: drop-shadow(2px 2px 10px #000000);
}


/* ================= Team Part Start ============ */

#team{
    width: 100%;
    height: 100vh;
    padding: 80px 20px;
    color: whitesmoke;
    text-align: center;
    /* background: linear-gradient(47deg, rgba(0,82,83,1) 0%, rgba(0,25,31,1) 100%); */
    backdrop-filter: blur(8px);
}
#team h1{
    padding-bottom: 50px;
    font-size: 64px;
}
.gallery{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.img-box{
    display: flex;
    width: 80px;
    height: 400px;
    border-radius: 50px;
    background: url(../images/img1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    z-index: 1;
    filter: drop-shadow(5px 5px 10px #212121);
}
.img-box::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0, 0, 0);
    opacity: .35;
    z-index: -1;
    transition: .3s;
}
.img-box:hover::before{
    width: 0;
    height: 0;
    transition: ease .3s;
}


.img-box:nth-child(2){
    width: 80px;
    height: 400px;
    border-radius: 50px;
    background: url(../images/img2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
}

.img-box:nth-child(3){
    width: 80px;
    height: 400px;
    border-radius: 50px;
    background: url(../images/img3.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
}
.img-box:nth-child(4){
    width: 80px;
    height: 400px;
    border-radius: 50px;
    background: url(../images/img4.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
}
.img-box:nth-child(5){
    width: 80px;
    height: 400px;
    border-radius: 50px;
    background: url(../images/img5.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
}
.img-box:nth-child(6){
    width: 80px;
    height: 400px;
    border-radius: 50px;
    background: url(../images/img6.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
}
.img-box:nth-child(7){
    width: 80px;
    height: 400px;
    border-radius: 50px;
    background: url(../images/img7.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
}

.img-box:hover{
    width: 320px;
}
.img-box:hover h3{
    transform: rotate(360deg);
    position: absolute;
    transition: 0.3s all linear;
    opacity: 0;
}

.img-box h3{
    z-index: 1;
    color: #FFFFFF;
    font-size: 28px;
    transition: 0.3s all linear;
    transform: rotate(270deg);
}

.img-box:nth-child(3) h2{
    font-size: 17px;
}

.img-box:hover h4, .img-box:hover h2{
    opacity: 1;
    background-color: #000000c0;
}

.detailz h4{
    z-index: 1;
    color: #FFFFFF;
    font-size: 16px;
    text-shadow: var(--brand-aux) solid 5px 5px 5px;
    transition: 0.3s all linear;
    position: absolute;
    bottom: 12px;
    left: 24px;
    opacity: 0;
}
.detailz h2{
    z-index: 1;
    color: #FFFFFF;
    font-size: 22px;
    text-shadow: var(--brand-aux) solid 5px 5px 5px;
    transition: 0.3s all linear;
    position: absolute;
    bottom: 28px;
    left: 24px;
    opacity: 0;
}


@media (max-width:576px) {
.img-box{
    display: flex;
    width: 40px;
    height: 280px;
    border-radius: 25px;
    background: url(../images/img1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    z-index: 1;
}


.img-box::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0, 0, 0);
    opacity: .4;
    z-index: -1;
    transition: .3s;
}
.img-box:hover::before{
    width: 0;
    height: 0;
    transition: ease .3s;
}


.img-box:nth-child(2){
    width: 40px;
    height: 280px;
    border-radius: 25px;
    background: url(../images/img2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
}

.img-box:nth-child(3){
    width: 40px;
    height: 280px;
    border-radius: 25px;
    background: url(../images/img3.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
}
.img-box:nth-child(4){
    width: 40px;
    height: 280px;
    border-radius: 25px;
    background: url(../images/img4.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
}
.img-box:nth-child(5){
    width: 40px;
    height: 280px;
    border-radius: 25px;
    background: url(../images/img5.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
}
.img-box:nth-child(6){
    width: 40px;
    height: 280px;
    border-radius: 25px;
    background: url(../images/img6.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
}
.img-box:nth-child(7){
    width: 40px;
    height: 280px;
    border-radius: 25px;
    background: url(../images/img7.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all .3s;
}


.img-box:hover{
    width: 200px;
}
.img-box h3{
    font-size: 22px;
}

.img-box:hover h4, .img-box:hover h2{
    opacity: 1;
    background-color: #000000c0;
    backdrop-filter: blur(20px);
}

.detailz h4{
    z-index: 1;
    color: #FFFFFF;
    text-align: center;
    font-size: 12px;
    text-shadow: var(--brand-aux) solid 5px 5px 5px;
    transition: 0.3s all linear;
    /* position: absolute; */
    bottom: 12px;
    left: 0;
    opacity: 0;
}
.detailz h2{
    z-index: 1;
    text-align: center;
    color: #FFFFFF;
    font-size: 16px;
    text-shadow: var(--brand-aux) solid 5px 5px 5px;
    transition: 0.3s all linear;
    /* position: absolute; */
    bottom: 24px;
    left: 0;
    opacity: 0;
}

}















/* ================= Team Part Start ============ */

/* ================= About Page End ================== */