/*=======================================================
  01 Default Area Css
=========================================================*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
}


body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #111
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
}

.h1,
.h1 {
    font-size: 40px;
}

.h2,
h2 {
    font-size: 36px;
}

.h3,
.h3 {
    font-size: 32px;
}

.h4,
.h4 {
    font-size: 28px;
}

.h5,
.h5 {
    font-size: 22px;
}

.h6,
.h6 {
    font-size: 18px;
}

p {
    margin: 0;
    padding: 0;
    font-size: 16px
}

a {
    color: #111;
    text-decoration: none;
    transition: all 0.4s ease 0s
}

a:hover {
    color: #ffa500#ffa500
}

ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

li {
    display: inline-block;
}

section {
    padding: 100px 0
}

.seaction-heading {
    text-align: center;
    margin-bottom: 50px;
}

.seaction-heading h2 {
    font-weight: 700;
}

.seaction-heading p {
    font-size: 18px;
    font-weight: 600;
}

.cta-btn {
    position: relative;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: hsl(220, 80%, 50%);
    width: auto;
    height: auto;
    margin-top: calc(50vh - 75px);
    border-radius: 30px;
    box-shadow: 0px 0px 0px 5px #ffa500, 0px 3px 0px 5px #ffa500, 0px 8px 8px 5px #0003;
    cursor: pointer;
    border-radius: 100px 30px 100px 30px;
    border: none !important;
}

.cta-btn:hover {
	animation: .8s morph ease infinite;
}


@keyframes morph {
	0% {
		border-radius: 100px 30px 100px 30px;
	} 50% {
		border-radius: 30px 100px 30px 100px;
	} 100% {
		border-radius: 100px 30px 100px 30px;
	}
}

@keyframes rot {
	0% {
		transform: rotate(-3deg);
	} 50% {
		transform: rotate(3deg);
	} 100% {
		transform: rotate(-3deg);
	}
}

/*=======================================================
  02 Header Area Css
=========================================================*/
header.header-area {
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
}
.header-area-inn {
    padding: 10px 0;
}

.header-left a img {
    width: 150PX;
}

.header-medle ul li {
    position: relative;
    margin-left: 25px;
}

.header-medle ul li a {
    padding: 10px 25px;
    color: #ffa500;
    font-size: 16px;
    background: #00000052;
}

.header-medle ul li a:hover {
    color: #fff;
    background: #ffa50080;
}
.header-medle ul li ul {
    position: absolute;
    width: 190px;
    margin-top: 30px;
    margin-left: -50px;
    z-index: -9;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s ease 0s;
    text-align: center;
}

.header-medle ul li ul li {
    display: block;
    margin: 0
}

.header-medle ul li ul li a {
    display: block;
    margin: 15px 0px 25px 0px;
}

.header-medle ul li ul li a:hover {
    color: #fff
}

.header-medle ul li:hover ul {
    visibility: visible;
    z-index: 9;
    opacity: 1;
    top: 100%;
}

.header-search-area {
    position: relative;
    padding: 20px 0;
}

.search-box {
    position: absolute;
    right: 0;
    width: 320px;
    height: 60px;
    background: #fff;
    border: 3px solid #ffa500;
    padding: 20px;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    top: 130%;
    transition: all 0.6s ease;
    z-index: 9;
}

.search-box input {
    position: absolute;
    left: 10px;
    width: 70%;
    border: medium none;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    top: 6px;
    outline: none;
}

.search-box button {
    position: absolute;
    right: 10px;
    width: 25%;
    height: 80%;
    background: #ffa500;
    padding: 10px;
    border-radius: 5px;
    top: 5px;
    border: 1px solid #ffa500;
    color: #fff;
    transition: all 0.6s ease;
}

.search-box button:hover {
    background: #fff;
    color: #ffa500;
}

.search-icon a i {
    color: #ffa500
}

.search-icon a i:hover {
    color: #FFF;
}

.search-box button i {
    color: #fff;
    margin-right: 10px;

}

.search-box button:hover i {
    color: #ffa500;
}

.header-search-area:hover .search-box {
    visibility: visible;
    opacity: 1;
    top: 100%
}

.header-top-right ul li a {
    margin: 0px 20px 0px 0px;
}

.header-top-right ul li a i {
    color: #ffa500;
    transition: all 0.6s ease;
    font-size: 20px
}

.header-top-right ul li a :hover {
    color: #FFF;
}
.header-flag img {
    width: 50px;
}

/*=======================================================
  02 Hero Area Css
=========================================================*/
section.hero-area {
    position: relative;
    z-index: 1;
    padding: 0;
    padding-top: 150px !important
}
.back-video {
    position: absolute;
    right: 0;
    bottom: 0%;
    width: 100%;
    z-index: -1;
}
.slider-text {
    margin-bottom: 100px;
}
.slider-text h1 {
    color: #ffa500;
    font-weight: 700;
    font-size: 42px;
}


.slider-text p {
    color: #ffa500;
    font-size: 20px;
    margin: 20px 0;
    line-height: 30px;
}

.slider-text a {
    color: #ffa500;
    padding: 15px 25px;
    margin-top: 20px;
    display: inline-block;
    background: #00000052;
}

.slider-text a:hover {
    background: #ffa50080;
    color: #FFF;
}

/*=======================================================
  03 Our Project Area Css
=========================================================*/

.our-project-prodact {
    margin-top: 25px;
    box-shadow: 0px 0px 5px 5px rgb(226 229 230 / 66%);
}

.header-text h4 {
    margin-bottom: 50px;
    font-weight: 700;
}
.header-text h3 {
    color: #ffa500;
}
.our-project-img {
    overflow: hidden;
    background: #eee;
    border-radius: 0px 0px 0px 70px;
    border: 1px solid #ffa500;
}

.our-project-img img {
    width: 100%;
    transform: scale(1);
    transition: all 0.6s ease
}

.our-project-img img:hover {
    transform: scale(1.3);
}

.our-project-text a h4 {
    color: #000;
    margin: 20px 0px;
    font-weight: 600;
    transition: all 0.6s ease
}

.our-project-text a h4:hover {
    color: #ffa500;
}

.our-project-text {
    margin: 0px 10px;

}
.our-project-text p {
    cursor: default;
}
.our-project-text p i {
    color: #ffa500;
    margin-right: 10px;
}

.our-project-text p {
    transition: all 0.6s ease
}

.our-project-text p:hover {
    padding-left: 5px
}

.our-project-btn a {
    color: #ffa500;
    padding: 15px;
    display: block;
    text-align: center;
    margin-top: 15px;
    transition: all 0.6s ease;
    font-size: 20px;
}

.our-project-btn a:hover {
    color: #fff;
    background: #ffa500;
}

/*=======================================================
  04 About Area Css
=========================================================*/
.about-area-icn {
    margin-top: 10px;
}
.about-area-icn img {
    width: 80px;
    padding: 5px;
    border: 1px solid #ffa500;
    border-radius: 15px;
    margin: 0px 20px 0px 0px;
}
.about-area-text {
    cursor: default;
}
.about-area-text h3 {
    color: #ffa500;
}
.about-area-icn:hover img {
    background:#eee;
}
.about-area-inn a {
    padding: 15px 25px;
    color: #ffa500;
    display: inline-block;
    margin-top: 25px;
    margin-left: 40%;
}

.about-area-inn a:hover {
    background: #00000047;
    color: #FFf;
}

.about-tour-img-area {
    position: relative
}

.about-tour-img-area::before {
    position: absolute;
    content: "";
    background: rgba(0, 0, 0, 0.5);
    top: 0px;
    left: 0%;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.about-tour-img-area img {
    width: 100%;
    border-radius: 20px;
}

.about-tour-img-area a {
    position: absolute;
    font-size: 30px;
    padding: 15px 25px;
    border: 1px solid #ffa500;
    border-radius: 10px;
    color: #ffa500;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.about-tour-img-area a:hover {
    background: #ffa500;
    color: #fff
}


/*=======================================================
  05 Featured Area Css
=========================================================*/

.featured-text h6 {
    color: #ffa500;
    font-weight: 700;
}
.featured-item {
    position: relative;
    overflow: hidden
}
.featured-item img {
    border-radius: 10px;
}

.featured-text {
    text-align: center;
    padding: 20px 0px;
    position: absolute;
    left: 0%;
    bottom: -30%;
    width: 100%;
    height: 30%;
    color: #fff;
    background: #212529b0;
    overflow: hidden;
    transition: all 0.6s ease;
    border-radius: 0px 0px 10px 10px;
}

.featured-item:hover .featured-text{
    bottom: 0%
}
.owl-nav {
 position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.owl-prev {
    position: absolute;
    left: 0;
}

.owl-prev span {
    font-size: 100px;
    color: #ffa500;
    
}

.owl-next {
    position: absolute;
    right: 0;
}

.owl-next span {
    font-size: 100px;
    color: #ffa500;
}
/*=======================================================
  06 Choose Area Css
=========================================================*/

.choose-img-area {
    box-shadow: 0 0px 20px 1px #00000030;
}
.choose-img-area > div{
    flex: 0 0 50%;
    max-width:50%
}
.choose-img-left {
    overflow: hidden;
}
.choose-area-text {
    margin-left: 30px;
}
.choose-img-left a img {
    width: 100%;
    transform: scale(1);
    margin-left: 10px;
    transition: all 0.6s ease;
}
.choose-img-right a{
    overflow: hidden;
    display: block;
    margin: 10px
}
.choose-img-right a img {
    width: 100%;
    transform: scale(1);
    transition: all 0.6s ease;
}
.choose-img-left a img:hover {
    transform: scale(1.3);
    transition: all 0.4s ease;
}
.choose-img-right a img:hover {
    transform: scale(1.3);
    transition: all 0.4s ease;
}
/*=======================================================
  07 Service Area Css
=========================================================*/
.service-area-inn {
    text-align: center;
    padding: 20px;
    border-radius: 20px;
    margin-top: 20px;
    box-shadow: 0 0px 10px 1px #00000038;
}
.service-area-inn:hover {
    box-shadow: 0 0px 20px 1px #00000038;
}
.service-area-inn img {
    width: 120px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 15px;
    background: #eee;
}
.service-area-inn h3 {
    margin-top: 15px;
    font-weight: 600;
    color: #ffa500;
}
.service-area-inn a {
    padding: 10px 20px;
    color: #ffa500;
    display: inline-block;
    margin-top: 25px;
}
.service-area-inn a:hover {
    background: #00000047;
    color: #FFF;
}
/*=======================================================
  08 Stuff Team Area Css
=========================================================*/

.stuff-team-header h4 {
    margin-bottom: 50px;
    font-weight: 700;
}

.stuff-team-inn {
    position: relative;
    overflow: hidden;
    border: 1px solid #ffa500;
    border-radius: 20px;
}

.stuff-team-text {
    padding: 15px 0;
    text-align: center;
    transition: all 0.6s ease;
    background: #eee;
}

.stuff-team-inn:hover .stuff-team-text {
    background: #ffa500;
    color: #fff
}

/*=======================================================
  09 Contact Area Css
=========================================================*/

.contact-icn-text:hover .contact-icn i {
    background: #000;
    color: #ffa500;
        
}
.contact-icn-text {
    padding: 20px;
    margin-top: 5px;
    border-radius: 20px;
}
.contact-icn i {
    font-size: 40px;
    border-radius: 50%;
    background: #ffa500;
    width: 60px;
    height: 60px;
    text-align: center;
    padding: 10px;
    color: #fff;
    margin-right: 15px;
    transition: all 0.6s ease;
}
.contact-btn {
    margin-top: 35px;
}
.contact-btn a {
    color: #ffa500;
    padding: 15px 25px;
    transition: all 0.6s ease;
    margin-left: 35%;
}
.contact-btn a:hover {
    background: #00000047;
    color: #FFF;
}
.contact-left-text .header-top-right ul li a {
    margin: 0px 25px 0px 0px;
}
.contact-left-text .header-top-right ul li a :hover {
    color: #000;
}
.contact-right {
    background: #eee;
    padding: 20px;
    border-radius: 20px;
}
.contact-from-site form input {
    width: 100%;
    padding: 10px 15px;
    margin: 10px 0;
    border: none;
    outline: none;
    border-radius: 10px;
}

.contact-from-site form textarea {
    width: 100%;
    padding: 10px 15px;
    border: none;
    outline: none;
    margin: 10px 0;
    border-radius: 10px;
}

.contact-from-site form button {
    color: #ffa500;
    padding: 15px 25px;
    margin-top: 15px;
    transition: all 0.6s ease;
    margin-left: 35%;
}

.contact-from-site form button:hover {
    background: #00000047;
    color: #FFF;
}
/*=======================================================
  10 process Area Css
=========================================================*/
.process-area .seaction-heading {
    margin-bottom: 30px
}

.process-img img {
    width: 100%;
    border-radius: 10px;
}

.process-img {
    position: relative;
    overflow: hidden;
    margin-top: 20px;
}

.process-text-area {
    position: absolute;
    left: 0%;
    top: -100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden;
    border-radius: 10px;
    transition: all 0.6s ease;
}

.process-text {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%
}

.process-img.process-img:hover .process-text-area {
    top: 0%
}
.process-text h5 {
    color: #ffa500;
}
.process-text h3 {
    font-weight: 600;
}


.process-text p span {
    color: #ffa500;
    font-size: 20px;
    font-weight: 600;
    margin-left: 15px
}

.process-text a {
    padding: 10px 20px;
    border: 1px solid #ffa500;
    border-radius: 5px;
    color:#ffa500;
    display: inline-block;
    margin-top: 20px
}

.process-text a:hover {
    color: #FFF;
    background: #ffa500;
}

/*=======================================================
  11 Clients area css
=========================================================*/
.clients-img {
    background: #eee;
    text-align: center;
    border-radius: 10px;
}
.clients-img a img {
    width: 50%;
    padding: 5px 0px;
}
.clients-img:hover {
    box-shadow: 0 0px 8px 1px #0000003b;
}

/*=======================================================
  12 Footer area css
=========================================================*/
.footer-area {
    background: #eeeeee8f;
    padding: 20px 0;
}

.single-footer {
    padding-bottom: 20px;
    text-align: center;
}

.single-footer p {
    font-size: 14px
}

.single-footer a {
    font-size: 14px
}

.single-footer-left p {
    line-height: 30px
}
.single-footer-left {
    text-align: center;
}
.single-footer-left img {
    width: 45%;
    margin-bottom: 10px;
}

.single-footer-left p {
    font-size: 14px
}


.single-footer h4 {
    margin-bottom: 20px;
    display: inline-block;
}

.single-footer ul li {
    display: block;

}

.single-footer ul li a {
    color: #000;
    line-height: 30px;
}

.single-footer ul li a:hover {
    color: #ffa500;
    padding-left: 5px;
}

.footer-heading ul li span {
    font-size: 17px;
    margin-right: 5px;
    font-weight: 600;
}

.footer-email-box {
    position: relative;
    width: 100%;
    height: 47px;
    padding: 15px;
    margin-top: 10px;
}

.footer-email-box input {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100%;
    border: medium none;
    padding: 15px;
    border-radius: 6px;
    outline: none;
    background: #eee
}

.footer-email-box button {
    position: absolute;
    right: 0%;
    top: 0%;
    width: 35%;
    height: 100%;
    border: medium none;
    background: #ffa500;
    color: #fff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #ffa500;
    transition: all 0.6s ease;

}

.footer-email-box button:hover {
    color: #ffa500;
    background: #fff
}

.copyright-area {
    text-align: center
}

.copyright-area p {
    border-top: 1px solid #ddddddb3;
    padding-top: 15px;
}

.copyright-area a {
    color: #ffa500;
    font-weight: 600
}

/*=======================================================
  13 Breadcromb Area Css
=========================================================*/

.breadcromb-area {
    background: url(../image/BANNER-2.jpg) no-repeat scroll 0 0 /cover;
    position: relative;
    z-index: 1;
    color: #fff;
    padding-top: 150px
}

.breadcromb-area::before {
    position: absolute;
    content: "";
    background: rgba(0, 0, 0, 0.6);
    top: 0px;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: -1
}

.breadcromb-header h1 {
    font-weight: 700
}

.breadcromb-button ul li {
    font-weight: 600;
    color: #ffa500;
}

.breadcromb-button ul li span {
    margin: 0px 5px;
}

.breadcromb-button ul li a {
    color: #fff;
    transition: all 0.6s ease
}

.breadcromb-button ul li a i {
    margin-right: 5px;
    color: #ffa500;
}

.breadcromb-button ul li a:hover {
    color: #ffa500
}
/*=======================================================
  14 About us Area Css
=========================================================*/
.about-us-img img {
    width: 100%;
    border-radius: 20px;
}
.about-us-img {
    position: relative;
    overflow: hidden
}

.about-us-img-text {
    text-align: center;
    padding: 20px 0px;
    position: absolute;
    left: 0%;
    bottom: -45%;
    width: 100%;
    height: 45%;
    color: #fff;
    background: #212529b0;
    overflow: hidden;
    transition: all 0.6s ease;
    border-radius: 0px 0px 20px 20px;
}

.about-us-img:hover .about-us-img-text{
    bottom: 0%
}
.about-us-img-text h4 {
    color: #ffa500;
    font-weight: 700;
}
.about-us-img-text ul li {
    display: block;
    margin-top: 5px;
}
.about-us-img-text ul li a {
    color: #fff;
}

.about-us-img-text ul li a:hover {
    color: #ffa500;
}

.about-us-img-text ul li span {
    font-size: 20px;
    margin-right: 5px;
    font-weight: 700;
}
.about-us-text {
    margin-left: 30px;
}
.about-us-text p {
    margin-top: 15px;
}
.about-us-text p span {
    font-weight: 600;
    color: #ffa500;
}
.about-us-text .contact-btn a {
    margin-left: 0;
}
/*=======================================================
  15 Contuct us Area Css
=========================================================*/
.contact-us-img img {
    width: 100%;
    border-radius: 20px;
}
.contact-about-area-inn h4 {
    color: #ffa500;
    font-size: 30px;
}
.contact-us-top-area {
    background: #eee;
    padding: 20px 20px 10px 20px;
    border-radius: 20px;
}

.contact-about-area-inn {
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    margin: 0px 0px 10px 0px;
    background: #fff;
}
.our-location-map {
    text-align: center;
    padding: 20px;
    background: #eee;
    border-radius: 20px;
}

/*=======================================================
  16 Not Found Area Css
=========================================================*/

.not-found-left h2 {
    font-size: 100px;
    font-weight: 700;
    color: #ffa500;
    display: inline-grid;
}

.not-found-area-inn h3 {
    font-weight: 600;
    margin-bottom: 15px
}

.not-found-area-inn a {
    padding: 10px 15px;
    display: inline-block;
    color: #ffa500;
    margin-top: 30px;
}

.not-found-area-inn a:hover {
    background: #ffa50080;
    color: #FFF;
}
/*=======================================================
  17 Fabrics Area Css
=========================================================*/
.fabrics-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
}
.fabrics-item img {
    width: 100%;
    border-radius: 10px;
}
.fabrics-text {
    text-align: center;
    padding: 20px 15px;
    position: absolute;
    left: 0%;
    bottom: -70%;
    width: 100%;
    height: 70%;
    color: #fff;
    background: #212529b0;
    overflow: hidden;
    transition: all 0.6s ease;
    border-radius: 0px 0px 10px 10px;
}
.fabrics-item:hover .fabrics-text{
    bottom: 0%
}
.fabrics-text h6 {
    color:#ffa500;
    font-weight: 700;
}
/*=======================================================
  18 Yarn Area Css
=========================================================*/
.yarn-area-right {
    width: 100%;
    height: 870px;
    overflow: scroll;
    border: 5px solid #ffa500;
    padding: 15px;
    border-radius: 15px;
}
.yarn-box {
    position: relative;
    margin-bottom: 15px;
    overflow: hidden;
}
.yarn-box img {
    width: 100%;
    border-radius: 20px;
}
p.yarn-code {
    position: absolute;
    top: 0;
    left: 5%;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    background: #ffa500;
    border-radius: 0px 0px 30px 30px;
    padding: 10px;
}

.yarn-box-text {
    padding: 59px 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    color: #fff;
    background: #212529b0;
    overflow: hidden;
    transition: all 0.6s ease;
    border-radius: 20px;
    margin-bottom: 0;
    opacity: 0;
}
.yarn-box-text.box-margin {
    padding: 81px 15px;
}
.yarn-box-text.box-margin-a {
    padding: 44px 20px;
}
.yarn-box-text h4 {
    color: #ffa500;
    font-weight: 700;
}
.yarn-box:hover .yarn-box-text{
    opacity: 1;
}
  .yarn-box-text a {
    padding: 10px 20px;
    border: 1px solid #ffa500;
    border-radius: 5px;
    color: #ffa500;
    margin-top: 20px;
    display: inline-block;
}
.yarn-box-text a:hover{
    color: #fff;
    background: #ffa500;
}