@import url('https://fonts.googleapis.com/css2?family=Anton&family=Fjalla+One&family=Mochiy+Pop+One&display=swap');

@import url("./open-props/open-props.min.css");

:root{
    --secondary:#6e899e;
    --primary-color:rgb(7, 85, 116);
}
html{
    overflow-x: hidden;
}
::selection{
    color:black;
    background-color: var(--primary-color);
}
*::-webkit-scrollbar{
    width:5px;
    background:transparent 
}
*::-webkit-scrollbar-thumb{
    background:var(--primary-color);
    height: 5px;
    border-radius: 360px;
}

.form-control:focus{
    outline:none;
    border:2px solid var(--secondary);
    box-shadow: 0 0 0 var(--primary-color) !important;
}

button{
    border:none;
    outline:none;
    cursor:pointer
}
*{
    margin:0;
    padding:0;  
    text-decoration: none;
    border:none;
    box-sizing: border-box;
    outline:none;
    background: transparent;
    transition: all .6s ease !important;
}
body, html{
    background-color: white;
}
/* IMPORTANT */
.lg-icon{
    font-family: 'lg' !important;
}

p{
  font-size: var(--font-size-0);
  line-height: var(--font-lineheight-3);
}
h1 {
  font-size: var(--font-size-6);
  line-height: var(--font-lineheight-1);
}

h2 {
  font-size: var(--font-size-5);
  line-height: var(--font-lineheight-1);
}

h3 {
  font-size: var(--font-size-4);
  line-height: var(--font-lineheight-2);
}

h4 {
  font-size: var(--font-size-3);
  line-height: var(--font-lineheight-2);
}

h5 {
  font-size: var(--font-size-2);
  line-height: var(--font-lineheight-2);
}

h6 {
  font-size: var(--font-size-1);
  line-height: var(--font-lineheight-3);
}
a{
    text-decoration: none !important;
}
a:hover{
    color:var(--primary-color)
}
::placeholder{
    color:var(--primary-color)
}
/**header**/
header{
    position:fixed;
    left:0;
    right:0;
    top:0;
    height:80px;
    background-color: white;
    z-index: 1000;
    display:grid;
    align-items: center;
}
header nav{
    display: flex;
    align-items: center;
    position:sticky;
    top:0;
    left:0;
    right:0;
    gap:50px;
    padding: 0 20px
}
nav .search{
    flex:1;
    position:relative;
}
.search.desktop{
    display: block;
}
.search.mobile{
    display: none;
}
@media(max-width:768px){
    .search.desktop{
    display: none;
}
    .search.mobile{
        display: block;
        padding:5px 10px;
        background-color: white;
    }
}
.search .search-results{
    position:absolute;
    padding:10px !important;
    width:90%;
    left:auto;
    right: auto;
    top:calc(100% + 4px);
    background: white;
    border-radius: 10px;
    z-index:10000;
    max-height:90vh;
    overflow-y: scroll; 
    display:none
 
}
.search-results::-webkit-scrollbar{
    background:transparent;
}
.search-results::-webkit-scrollbar-thumb{
    
}
.search-results .search-result{
    display: flex;
    gap:10px;
    background:white;
    margin-bottom: 5px;
}

.search-results .search-result img{
    display: block;
    width:50px;
    height:50px;
    object-fit: cover;
    object-position: center;
}

.search-results .search-result .result-info h5{
    font-size: var(--font-size-0);
    color:black
}
.search-results .search-result .result-info small{
    color:gray;
    font-size: var(--font-size-00);
}
.search-result :is(h5, small){
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin:0
}
nav .search input{

}

nav .logo img{
   display:block;
   width:120px
}
nav ul.menus{
    display: flex;
    list-style: none;
    margin:0
}
nav ul.menus li.menu{
    text-transform: uppercase;
    font-size: .8em;
    transition: all .4s;
}

nav ul.menus li.menu a.menu-link{
    color:var(--primary-color);
    position:relative;
    padding:10px 15px
}
nav ul.menus li.menu a.menu-link.active{
   background:var(--primary-color);
   color:white;
   font-weight:bold
}

nav ul.menus li.menu:hover::before{
    width:100% !important
}

nav button{
    display: none;
}
@media(max-width:768px){
    nav{
        justify-content: space-between;
        padding-right: 10px;
    }
    nav ul.menus{
        position:fixed;
        top:0;
        left:-300px;
        height:100vh;
        width:300px;
        background-color: white;
        z-index: 10000;
        flex-direction: column;
        justify-content: center;
        gap:20px;
        padding-left:40px
    }
    nav ul.menus li.menu{
        font-size: 15px;
        width:fit-content;
    }
    nav button{
        display:block;
        color:var(--primary-color)
    }
}

/**main**/
main{
    margin-top: 80px
}


.banner-extra-page{
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
}
.banner-extra-page .wrapper-extra-page{
    height:35vh;
     background:linear-gradient(0deg, rgba(1, 38, 48, 0.856), transparent);
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:0 20px
}
.wrapper-extra-page h1{
    color:white;
    font-size:var(--font-size-6);
    text-align: center;
}
@media(max-width:768px){
    .banner-extra-page .wrapper-extra-page{
        padding:0 50px;
        height:20vh
    }
    .wrapper-extra-page h1{
        font-size: var(--font-size-2);
        text-align: center;
    }
}


@media(max-width:768px){

}
section h2.section-title{
    text-align: center;
    margin:20px 0;
    position:relative
}
section h2.section-title::before{
    content: "";
    position:absolute;
    height:2px;
    background-color: black;
    width:90px;
    bottom:-5px;
    left:50%;
    transform: translate(-50%, -50%);
}

@media(max-width:768px){
    section p.section-description{
        width:100%
    }
}
section a.action{
    display: block;
    margin: 30px auto;
    width:fit-content;
    background-color: var(--secondary);
    box-shadow: var(--shadow-5);
    color:white;
    padding:var(--size-2) var(--size-5)
}

iframe{
    width:100%;
    height:300px
}
section.first-home-section{
    margin-top:20px
}
.about-home{
    display:flex;
    flex-direction: column;
    gap:10px;
    align-items: center;
}
.about-home p{

}
@media(max-width:768px){
    .about-home{
        grid-template-columns: repeat(1,1fr);
    }
    .about-home p{
                text-align: center;
    }
}
section.writeup{
    display:grid;
    grid-template-columns: 30% 70%;
    gap:10px;
}
.writeup.ordinary{
    display:block
}
section.writeup .extra img{
    display:block;
    width:100%;
    border-radius: 10px;
}
section.writeup .extra .features{
    display:flex;
    flex-wrap: wrap;
    gap:5px;
    margin-top: 10px;
}
.extra .features a{
    display: block;
    color:grey;
    background-color: whitesmoke;
    font-size: 9px;
    padding: 5px 10px
}

@media(max-width:768px){
    section.writeup{
        grid-template-columns: repeat(1,1fr);
    }
}


.contact-holder form textarea{
    padding: 1em;
    border:1px solid var(--primary-color);
    width:100%;
    height:20vh;
    margin-bottom: 1em;
    color:var(--primary-color)
}
.contact-holder form button{
    width:100%;
    padding:.8em 1em;
    background-color: var(--primary-color);
    color:white;
    cursor:pointer
}





.divider{
    height: .07em;
    margin:1em 2em;
    background: lightgrey;
}
/**modals**/
.modal{
    position: fixed;
    top:0;
    left:0;
    right:0;
    height:100vh;
    z-index: 1050;
    background: rgba(3, 89, 160, 0.925);
    transition: all .4s;
}

        /**preload**/
        .modal.preload{
            display:grid;
            place-content: center;
        }

        .modal.preload .content{
            display:grid;
            place-content: center;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            gap:10px
        }
        .modal.preload .content .spinner{
            height:40px;
            width:40px;
            border:2px dotted white;
            border-top:2px solid white;
            border-radius: 360px;
            animation: spin .4s linear infinite;
        }
        @keyframes spin{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        .modal.preload .content .text{
            color:white
        }
.hide-modal{
    opacity: 0;
    z-index: -1;
}

.hide-aside{
    margin-left:-80%
}

/**fab**/
.fab{
    position: fixed;
    right:4%;
    width:40px;
    height:40px;
    border-radius: 360px;
    display: grid;
    place-content: center;
    background-color: var(--primary-color);
    cursor: pointer;
    transition: all .4s;
}
.fab:hover{
    transform: scale(1.1);
}
.fab span{
    color:white;
    cursor: pointer;
}

.fab.whatsapp{
    bottom:2%;
}

.fab.email{
    bottom:10%; 
    border-radius: 360px;
}

.gallery-item{
    position:absolute;
    width:300px;
    aspect-ratio: 1/1;
}
.gallery-item .info{
    position:relative;
    background-color: black;
}

.listing-items{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:10px
}

@media(max-width:768px){
    .listing-items{
    grid-template-columns: repeat(1,1fr);
   
}
}
.listing-item{
    width:300px;
    background-color: white;
    box-shadow: var(--shadow);
}
.listing-item img{
    display:block;
    width:100%
}
.listing-item .info{
    padding:5px 10px;
}
.listing-item .info a h5{
    font-size: var(--extra-small-header);
    color:black;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.listing-item .info .excerpt{
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.listing-item .info .excerpt:first-child{
    padding:0 !important
}


.blocks{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap:20px;
    margin-top:40px
}


@media(max-width:768px){
    .blocks{
        grid-template-columns: repeat(1,1fr);
    }
}
.block{
  flex: 0 1 250px;
  color: black;
  box-shadow: var(--shadow-2);
  padding: var(--size-2);
}
@media(max-width:768px){
    .block{
        flex: 0 1 320px
    }
}
.services-title::before{
    margin-top:10px !important;
    width:60% !important;
    height:2px !important
}
.blocks.services{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
    margin-left:300px;
}
@media(max-width:768px){
    .blocks.services{
        margin-left: 0;
        display:block;
        padding:0 20px
    }
}
.block.service{
    box-shadow: none !important;
    color:black;
}

.block.service h2{
      font-size: var(--font-size-4);
      display:-webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      color:var(--primary-color);
      margin-bottom: 10px;
      position:relative;
    
}
.block.service h2::before{
    content:"";
    position: absolute;
    background: var(--primary-color);
    height:2px;
    width:0%;
    bottom:0

}
.block.service h2:hover::before{
   width:20%
}
.block.service p{
    font-size: var(--font-size-0) !important;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.block.service p ul{
    list-style-type: disc !important;
}
.block.service p ol{
    list-style-type: decimal !important;
}
.block img{
    display: block;
    width:100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
    border-radius: 20px !important;
}
.block .block-info h4{
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   margin:10px 0
}
.block .block-info p{
     display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
}


.full-height{
    height:100vh;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap:10px
}

.design-demo{

}

.design-demo .design-main-image{
    display:block;
    width:100%;
    height: 300px;
    object-fit: cover;
    object-position: center;
    opacity: .1;
}

.design-demo .design-options{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap:10px
}
.design-options a{
    display: block;
    width: fit-content;
    font-size:var(--font-size-1);
    padding:10px;
    box-shadow: var(--shadow-2);
    color:var(--primary-color)
}
.design-options a:hover{
   color:white;
   background-color: black;
}
.design-demo p{
    margin:30px 0
}
video::-webkit-progress-bar{
    padding:30px;
    color:var(--primary-color)
}
video{
    width:100%;
    height:600px;
    border-radius: 30px;
    display: block;
}
@media(max-width:768px){
    video{
        height:200px
    }
}

.grouping-home{
    display:grid;
    grid-template-columns: 60% 40%;
    gap:20px;
}
@media(max-width:768px){
    .grouping-home{
        grid-template-columns: repeat(1,1fr);
    }
}

.tiles-area{
    margin-top:30px
}
.tiles-holder{
  margin-bottom: 2em;
}
.tiles-holder h5{
    margin-bottom: 1em;
    
}
.tiles-holder .more{
    font-size: var(--font-size-0);
    color:var(--primary-color)
}
.tiles-holder .tiles .tile  h6{
    font-size: 14px;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.tiles-holder .tiles .tile small{
    color:var(--secondary);
    font-size: 12px;
}
.tiles{
        display:grid;
        gap:20px
}
.tile{
        color:var(--primary-color);
        position:relative;
        display: flex;
        gap:10px
}
.tile img{
    display:block;
    width:50px;
    height:50px;
    object-fit: cover;
    object-position: center;
}
.tile::before{
    position:absolute;
    bottom:-10%;
    content:"";
    width:20%;
    height:5%;
    background-color: var(--primary-color);
    transition: width .4s;
}

.tile:hover::before{
            width:80%
}

.about-us-page{
    width:50%;
    margin:auto
}


.carousel{
    margin:0 !important;
    padding:0 !important
}
.carousel-item{
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat;
}
.carousel-item-wrapper{
    height:55vh;
    background: linear-gradient(0deg, black, transparent);
}
@media(max-width:768px){
    .carousel-item-wrapper{
        height:40vh;
        background: linear-gradient(0deg, black, transparent);
    }
    .carousel-caption h1{
        font-size: 25px !important;
    }
}

.reveal{
    opacity:0;
    transform:translateY(40px);
}
.reveal.show{
    opacity:1;
    transform: translateY(0);
}
@media(max-width:768px){
    .the-article-title{
        font-size: 20px !important;
    }
}
.line-clamp-1{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.line-clamp-2{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.line-clamp-3{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
.line-clamp-4{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
.line-clamp-5{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}
.card-title{
    color: var(--primary-color) !important
}
.card-badge{
    background-color: var(--primary-color);
}