@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

html {

    scroll-behavior: smooth;

}



html,

body {

    font-size: 100%;

    overflow-x: hidden;

    font-family: "Plus Jakarta Sans", sans-serif;

}

 body {

    padding-top: 84px;

}

body a {

    transition: 0.6s all ease;

    -webkit-transition: 0.5s all ease;

    -moz-transition: 0.5s all ease;

    -o-transition: 0.5s all ease;

    -ms-transition: 0.5s all ease;

    text-decoration: none;

    font-size: 16px;

}



body img {

    transition: 0.6s all ease;

    -webkit-transition: 0.5s all ease;

    -moz-transition: 0.5s all ease;

    -o-transition: 0.5s all ease;

    -ms-transition: 0.5s all ease;

    text-decoration: none;

}



a:not([href]):not([tabindex]) {

    color: #fff;

}



a:not([href]):not([tabindex]):hover,

a:not([href]):not([tabindex]):focus {

    color: #fff;

    cursor: pointer;

    user-select: none;

}



h1,

h2,

h3,

h4,

h5,

h6 {

    margin: 0;

    font-weight: 600;

    transition: 0.6s all ease;

    color: #000;

}



/* title */



h2 {

    font-weight: 800;

    font-size: 40px;

    line-height: 1.5;

}



/* subtitle */



h4 {

    font-weight: bold;

    font-size: 26px;

    line-height: 1.5;

}



p,

.table th,

.table td {

    line-height: 1.5;

    font-size: 14px;

    color: #333;

    margin: 0;

    transition: 0.6s all ease;

}



p,

li,

a {

    line-height: 1.5;

    font-size: 14px;

    color: #000;

    font-weight: 400;

    margin: 0;

    transition: 0.6s all ease;

}



ul {

    margin: 0;

    padding: 0;

}



li {

    list-style-type: none;

}



body a:hover {

    text-decoration: none;

    color: #b10400;

}





header.header {

    position: fixed;

    width: 100%;

    top: 0;

    background: #fff;

    box-shadow: 4px 4px 30px rgb(0 0 0 / 4%);

    z-index: 9;

}



.space {

    padding: 50px 0px;

}



.hexagon-gallery {

    margin: auto;

    display: grid;

    grid-template-columns: repeat(2, 0fr);

    grid-auto-rows: 352px;

    grid-gap: 14px;

    justify-content: center;

}



.hex:first-child {

    grid-row-start: 1;

    grid-column: 2 / span 2;

}



.hex {

    display: flex;

    position: relative;

    width: 311px;

    height: 352px;

    background-color: #424242;

    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

}



.hex:nth-child(2) {

    grid-row-start: 1;

    grid-column: 4 / span 2;

}



.hex:nth-child(3) {

    grid-row-start: 1;

    grid-column: 6 / span 2;

}



.hex:nth-child(4) {

    grid-row-start: 2;

    grid-column: 3 / span 2;

    margin-top: -90px;

}



.hex:nth-child(5) {

    grid-row-start: 2;

    grid-column: 5 / span 2;

    margin-top: -90px;

}

.hex:nth-child(6) {

    grid-row-start: 3;

    grid-column: 5 / span 2;

    margin-top: -90px;

}




.topMainSection {

    background-size: cover;

    background-repeat: no-repeat;

}



footer.footer {

    background: #000000;

    padding: 20px 0px;

}



footer.footer .copyright p {

    color: #fff;

}



.hex:after {content: "";background: rgb(0 0 0 / 50%);position: absolute;width: 100%;height: 100%;}



.hex{ 

        cursor: pointer;

        background-size: cover;

        background-repeat: no-repeat;

            background-position: center;

}



.hexContent {

    z-index: 9;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: end;

    flex-direction: column;

    width: 100%;

        padding-bottom: 70px;





}



.hexContent h3 {

    font-size: 24px;

    font-weight: 800;

    line-height: 42px;

    text-align: center;

    color: #fff;

    margin-bottom: 0;

}



.hexContent .hexContentBox {

    text-align: center;

    max-width: 270px;

    margin-left: auto;

    margin-right: auto;

    height: 0;

    overflow: hidden;

    

    transition: 0.6s all ease;

    -webkit-transition: 0.5s all ease;

    -moz-transition: 0.5s all ease;

    -o-transition: 0.5s all ease;

    -ms-transition: 0.5s all ease;

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.hexContent .hexContentBox p {

    color: #fff;

    max-width: 190px;

    font-size: 14px;

    font-weight: 400;

    line-height: 20px;

    text-align: center;

    margin-bottom: 20px;

    margin-top: 8px;

}



.hexContent .hexContentBox a {

    font-size: 14px;

    font-weight: 700;

    line-height: 18px;

    text-align: left;

    color: #fff;

    border-bottom: solid 1px #E41A1F;

    padding-bottom: 5px;

}

.hex:hover .hexContent{

        justify-content: center;

}



.hex:hover .hexContent .hexContentBox{

       height: 100%;

    overflow: hidden;

    transition: 0.6s all ease;

    -webkit-transition: 0.5s all ease;

    -moz-transition: 0.5s all ease;

    -o-transition: 0.5s all ease;

    -ms-transition: 0.5s all ease;

}



.hex:hover .hexContent>h3 {

    display: none;

    transition: 0.1s all ease;

    -webkit-transition: 0.1s all ease;

    -moz-transition: 0.1s all ease;

    -o-transition: 0.1s all ease;

    -ms-transition: 0.1s all ease;

}



.SectionHeading h2{ 

font-size: 36px;

font-weight: 800;

line-height: 42px;

text-align: center;



}



.SectionHeading {

    margin-bottom: 50px;

}



nav.navbar.navbar-expand-lg.navbar-light.pl-0.pr-0 {

    justify-content: space-between;

}



.right-head .RightContact {

    display: flex;

    align-items: center;

}



.right-head .RightContact .ContactDetails span {

    font-size: 12px;

    font-weight: 500;

    line-height: 18px;

    letter-spacing: 0.5px;

    text-align: left;

    color: #696969;

}



.right-head .RightContact .ContactDetails p a {

    font-size: 14px;

    font-weight: 700;

    line-height: 16px;

    letter-spacing: 0.5px;

    text-align: left;

    color: #000000;

}



.right-head .RightContact .ContactDetails:first-child {

    padding-right: 20px;

    margin-right: 20px;

    border-right: solid 1px #DDDDDD;

}



.hexContent .hexContentBox > img {

    width: 180px;

    object-fit: contain;

    background: #fff;

    padding: 15px;

    border-radius: 15px;

    height: 60px;

    margin-bottom: 10px;

}