/*banner css*/

.slider {
    position: relative;
    width: 100%;
    height: 70vh;
}

.items {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 56.25%;
}

.item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.item.current {
    opacity: 1;
}

.item img {
    width: 100%;
    height: 80vh;
    object-fit: cover;
}
.item.current .banner-text {
    transform: translate(0px, 0px); opacity:1;
}.item .banner-text {
    /* transform: translate(0px, 90px); */
    transition:.5s ease all;
    opacity:0;
}
.buttons {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    width: 32px;
    height: 32px;
    border: none;
    outline: none;
    padding: 0;
    background: transparent center no-repeat;
    cursor: pointer;
    opacity: 0.4;
}

.button.prev {
    background-image: url(https://codeisle.info/blog/wp-content/uploads/2018/12/ico_next_b32.png);
}

.button.next {
    background-image: url(https://codeisle.info/blog/wp-content/uploads/2018/12/ico_next_b32-1.png);
}

.button:hover {
    opacity: 0.8;
}

.dots {
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    outline: none;
    padding: 0;
    background: #777;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.4s ease-in-out;
}

.dot:nth-child(n+2) {
    margin-left: 5px;
}

.dot.current {
    opacity: 1;
}

section.banner-panel {
    height: 100vh;
    overflow: hidden;
    padding-top: 9.5rem;
}

@media (min-width: 1024px) {
    .lg\:text-left {
        text-align: left;
    }
}

.text-center {
    text-align: center;
}

.p-10 {
    padding: 2.5rem;
}

.bg-\[\#ffffff\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.border-\[var\(--primary-color\)\] {
    border-color: var(--primary-color);
}

.border-\[10px\] {
    border-width: 10px;
}

@media (min-width: 1280px) {
    .slider .xl\:w-1\/3 {
        width: 33.333333%;
    }
}

@media (min-width: 768px) {
    .md\:p-0 {
        padding: 0px;
    }
}

@media (min-width: 768px) {
    .md\:w-1\/2 {
        width: 50%;
    }
}

@media (min-width: 768px) {
    .md\:my-32 {
        margin-top: 8rem;
        margin-bottom: 8rem;
    }
}

@media (min-width: 768px) {
    .md\:left-24 {
        left: 6rem;
    }
}

li.item {
    display: grid;
}

li.item>* {
    grid-area: 1/1;
}

.border-10 {
    background: #fffffff0;
    border: 10px solid var(--primary-color);
    padding-inline: 2rem;
    padding-block: 3rem;
}

.banner-text {
    z-index: 99;
}

.border-b-8 {
    border-bottom: 8px solid var(--primary-color);
}


/*about panel css*/


.about_panel {
    padding: 2.5rem;
    display: grid;
    width: 100%;
    align-items: flex-end;
    justify-content: right;
    position: relative;
}

.about_panel>* {
    grid-area: 1/1;
}

.text-about {
    margin-left: auto;
    background-color: var(--primary-color);
    border: 10px solid #fff;
    padding: 4rem;
    text-align: center;
    color: #fff;
    top: 2.5rem;
    position: relative;
    right: -2.5rem;
}

.box-shadow {
    z-index: -1;
}

.w-4\/5 {
    width: 80%;
}

.h-4\/5 {
    height: 80%;
}

.about_paneltext {
    padding-top: 2.5rem;
    padding-inline: 3rem 9rem;
}

.ab-right {
    padding-right: 1.5rem;
}

section.home_about_panel {
    padding: 3rem 0;
    overflow: hidden;
}

.about_paneltext h3 {
    margin-bottom: 0;
    padding-bottom: 1rem !important;
}

.absolute.inset-0.w-full.bg-cover.bg-center.object-cover {
    height: 30rem;
}

.home_new_panel2 h2 {
    border-bottom: 4px solid var(--primary-color);
    width: fit-content;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    color: #000;
}

.portfolio-item {
    position: relative;
    display: grid;
}

.portfolio-item>* {
    grid-area: 1/1;
}

.div-height {
    height: 100%;
}

.div-height h3,
.div-height p {
    color: #fff;
}

.div-height.inset-0 {
    filter: inherit;
}

.home_portfolio h2,
.home_feedback h2 {
    width: fit-content;
    border-bottom: 4px solid var(--primary-color);
    color: #000;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}

@media (min-width: 1024px) {
    .lg\:w-96 {
        width: 24rem;
    }
}

.shadow-\[0_0_6px_1px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
    --tw-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
    --tw-shadow-colored: 0 0 6px 1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.spce-5 {
    gap: 2rem;
}

.rounded-md {
    border-radius: 0.375rem;
}

.pl3 {
    padding-inline: 2rem;
}

.top-2 {
    top: 0.5rem;
}

.right-4 {
    right: 1rem;
}

.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.p-8 {
    padding: 2rem;
}

@media (min-width: 640px) {
    .sm\:p-10 {
        padding: 2.5rem;
    }
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.home_form_panel h3 {
    color: #fff;
}

.h-\[30rem\] {
    height: 30rem;
}

@media (min-width: 640px) {
    .sm\:p-8 {
        padding: 2rem;
    }
}

.inset-1.m-img {
    height: 100%;
}

.inset-1.m-img:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    --tw-brightness: brightness(.25);
    filter: brightness(.25);
    background: #000000b5;
}

.text_sp {
    z-index: 9;
    padding: 3rem !important;
}

.text_sp i {
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.home_form_panel input,
.home_form_panel textarea {
    box-shadow: inherit !important;
    outline: 0;
    border: 0 !important;
    margin-bottom: 1.2rem;
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.home_form_panel .tracking-wider {
    letter-spacing: 0.05em;
    border: 0;
}

@media (max-width:1023px) {

    .naigation,
    .contact-pan {
        display: none !important;
    }

    .home_about_panel .col-md-6 {
        width: 100%;
    }

    .about_paneltext {
        padding-top: 2.5rem;
        padding-inline: 3rem 3rem;
    }

    .pl-left {
        padding-inline: 0rem;
    }
}

@media (max-width:1099px) {
    .items {
        padding-bottom: 100%;
    }

    .about_paneltext {
        padding-top: 2.5rem;
        padding-inline: 3rem 0rem;
    }

    section.home_about_panel {
        overflow: hidden;
    }
}

@media (max-width:650px) {

    .about_panel {
        padding-inline: 0;
        padding-top: 0px;
    }

    section.home_about_panel {
        padding: 0rem 0;
    }

    .container {
        padding-inline: 0;
    }

    .about_paneltext {
        padding-top: 2.5rem;
    }

    .px-14 {
        padding-left: 3.5rem;
        padding-right: 3.5rem;
    }

    body .pl-left {
        padding-inline: 0;
    }

    section.banner-panel {
        height: 127vh;
        overflow: hidden;
    }


    .home_portfolio .grid {
        padding-inline: 1.5rem;
    }

    .slider {
        position: relative;
        width: 100%;
        height: 68vh;
    }

    .item img {
        width: 101%;
        height: 60vh;
        object-fit: cover;
    }

    .items {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 60vh;
        padding-bottom: inherit;
    }

    .banner-text {
        padding: 1.5rem;
    }

    .about_paneltext {
        padding-top: 2.5rem;
        padding-inline: 2rem 2rem;
    }

    .home_portfolio .container {
        padding-top: 0;
    }
}

.anachor-tag1 {
    position: relative;
    top: -120px;
    transform: translateZ(0);
    transition: transform .6s ease-in-out;
    backface-visibility: hidden;
}
.h-full:hover {
    /* background: #4b8db9; */
    /* color:#fff; */
    transition:.2s ease all;
}.h-full {
    transition:.2s ease all;
}
.h-full:hover h4{/* color:#fff; */}
.h-full:hover i {
    /* color: #fff; */
}

section.home_form_panel span a {
    color: #fff;
}

footer a {color: #fff;}

@media (max-width:990px) {

.home_discover .text-center {
    padding-inline: .8rem;
}
.home_portfolio button{margin-bottom:.5rem;}
.item .banner-text p {
    display: none;
}

.item .banner-text h1 {
    border: 0;
    margin: 0;
    padding: 0;
}

.item .banner-text h3.pb-4.text-base {
    margin-bottom: 0;
}

}
@media(max-width:1199px){

  body  .slider .xl\:w-1\/3 {
        width: 100%;
        margin-top: 7rem;
    }
section.banner-panel {
    height: 76vh;
    overflow: hidden;
    padding-top: 6.5rem;
}

}
}

@media(max-width:1599px){
    .banner-text h1 {
    font-size: 1.5rem;
}
   .banner-text .md\:my-32 {
        margin-top: 2rem;
        margin-bottom: 8rem;
    }
    
  body  .slider .xl\:w-1\/3 {
        width: 38.333333%;
        margin-top: 3rem;
    }

.banner-text p{font-size: .75rem!important;line-height: 1.2rem;margin-bottom: 0;}

}
}