:root{
    --default-font: 'Oxygen';
    --default2-font: 'Nunito';
    --default3-font: 'Questrial';
    --white: #ffffffb3;
    --black: #060606;
    --gray: #f2f2f2;
    /* --dcolor: #c8f31d; */
    --dcolor: #0fabbd;
    --dcolor2: #f26e22;
    --header-border-color: #383838;
    --contact-us-bg: #f2f2f2;
}
.fcc{display:flex;align-items:center;justify-content:center;}
*,::after,::before{margin:0;padding:0;outline:none;box-sizing:border-box;outline:none;}
body{font-family:"Oxygen",Arial, Helvetica, sans-serif;scroll-behavior:smooth;background-color:var(--black);}
*{color:var(--gray);}
a{text-decoration:none;color:initial;}

/* HEADER */
header{width:100%;border-bottom:.5px solid var(--header-border-color);position:sticky;top:-1px;background-color:var(--black);z-index:99999;}
header nav{width:80%;margin:0 auto;padding:30px 0;display:flex;align-items:center;justify-content:space-between;}

.logo{gap:0;}
.logo img{width:150px;aspect-ratio:16/7;object-fit:contain;}
.logo span{font-weight:600;font-size:calc(1rem);margin-left:-20px;}

.menu-btn{background-color:transparent;border:none;padding:7px;display:none;}
.menu-btn i{color:var(--gray);font-size:calc(2rem);}

.sub-menu-contact-container{width:calc(100% - 33.333%);justify-content:space-between;}

.sub-menu-ul{display:flex;align-items:center;justify-content:center;gap:0 40px;}
.sub-menu-ul li{list-style:none;}

.sub-menu-li a{color:var(--gray);gap:0 5px;overflow:hidden;position:relative;font-weight:600;flex-direction:column;transition:color .2s ease-in;}
.sub-menu-li a::after{content:'';width:0%;height:2px;background-color:var(--dcolor);transition:width .2s ease-in;}
.sub-menu-li a:hover{color:var(--dcolor);}
.sub-menu-li a:hover::after{width:100%;}

.sub-menu-li-icon{width:20px;height:20px;border-radius:50%;background-color:var(--dcolor);position:absolute;left:calc(100% + 5px);}
.sub-menu-li-icon i{font-size:calc(1rem - 6px);color:white;}

.contact-us{background-color:var(--dcolor);padding:15px;border-radius:5px;gap:0 7px;color:var(--gray);font-weight:600;font-size:calc(1rem);font-family:var(--default-font);}
.contact-us i{font-size:calc(1rem + 2px);color:var(--gray);transition:transform .3s ease-in;}
.contact-us:hover i{transform:translateX(5px);}

main{width:100%;margin:0 auto 100px;}
.main-top-container{width:80%;margin:50px auto 0;}

/* HERO SECTION */
.top-header-title h1{text-align:start;font-size:calc(8rem);color:var(--gray);font-family:var(--default3-font);flex-direction:column;gap:10px 0;}

.top-header-title h1 span{justify-content:space-between;width:100%;color:var(--dcolor);}
.top-header-title h1 span .inner-h1-text{color:var(--gray);font-size:calc(2rem);font-weight:300;justify-content:flex-end;position:relative;}
.top-header-title h1 span .inner-h1-text::after{content:'';position:absolute;width:100%;height:calc(100% + 20px);background-color:var(--dcolor);top:-11px;left:5px;z-index:-1;transform:rotate(-3deg);}

.top-header-image{margin:50px auto 0 0;width:50%;position:relative;}
.top-header-image img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:10px;filter:grayscale(100%);}

.book-free-call{background-color:var(--dcolor);padding:15px;border-radius:5px;gap:0 7px;color:var(--gray);font-weight:600;font-size:calc(1rem);font-family:var(--default-font);position:absolute;white-space:nowrap;transition:transform .3s ease-in;}
.book-free-call i{font-size:calc(1rem + 2px);color:var(--gray);}
.book-free-call:hover{transform:translateX(20px);}

/* PARTNERS */
.partners-container{width:80%;margin:70px auto 0;}
.partners-title{text-align:center;}
.partners-title h6{text-align:center;text-transform:uppercase;color:var(--white);font-size:calc(1rem + 2px);}

.partners-lists-card{width:100%;margin:20px auto 0;overflow:hidden;}
.partners-lists{width:100%;display:flex;align-items:center;gap:0 10px;}
.partner-image-card{width:calc(100% / 5);min-width:calc(100% / 5);aspect-ratio:16/7;background-color:white;border-radius:15px;padding:20px;}
.partner-image-card img{width:calc(100%);height:100%;object-fit:cover;border-radius:10px;}

.partners-lists{animation-name:partners;animation-duration:10s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:linear;}
.partners-lists:hover{animation-play-state:paused;}
@keyframes partners {
    from{transform:translateX(0%);}
    to{transform:translateX(-50%);}
}

/* ABOUT US */
.about-us-container{width:80%;margin:100px auto 0;}
.about-us-body{width:100%;display:flex;align-items:center;gap:0 30px;}

.about-us-desc,.about-us-image{width:calc(100% / 2);}

.about-us-top-title{display:flex;align-items:center;gap:0 5px;}
.about-us-top-title i{font-size:calc(2rem);color:var(--dcolor);}
.about-us-top-title span{font-size:calc(3rem - 6px);color:var(--dcolor);font-weight:300;text-transform:uppercase;font-family:var(--default3-font);}

.about-us-mission,.about-us-vision{margin:20px auto 0;width:100%;display:flex;align-items:flex-start;flex-direction:column;gap:10px 0;}
.about-us-mission h5,.about-us-vision h5{text-transform:capitalize;display:flex;align-items:center;gap:0 10px;text-align:center;color:var(--gray);font-size:calc(2rem - 6px);font-weight:700;font-family:var(--default3-font);}
.about-us-mission h5::before,.about-us-vision h5::before{content:'';width:50px;height:2px;background-color:var(--dcolor);position:relative;}

.about-us-mission p,.about-us-vision p{font-size:calc(1rem + 4px);color:var(--white);font-family:var(--default3-font);text-align:start;padding-left:60px;}
.about-us-image img{width:100%;aspect-ratio:16/13;border-radius:10px;object-fit:cover;}

/* OUR SERVICES */
.our-services-container{width:80%;margin:100px auto 0;}
.our-service-subtitle{padding:20px 0;border-bottom:1px solid var(--header-border-color);text-transform:capitalize;color:var(--gray);font-size:calc(2rem);font-weight:700;font-family:var(--default3-font);}

.our-services-body{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3, auto);gap:30px 40px;margin:40px auto 0;}
.service-card{padding:0 0 30px;border-bottom:1px solid var(--header-border-color);width:100%;display:flex;align-items:center;justify-content:space-between;gap:0 20px;cursor:pointer;}

.service-card-left{display:flex;align-items:flex-start;gap:0 5px;}
.s-card-left-sup{font-size:calc(1rem - 3px);color:var(--gray);font-weight:300;}

.service-card-left-inner{display:flex;flex-direction:column;align-items:flex-start;gap:10px 0;}
.service-card-left-inner span{font-family:var(--default3-font);transition:color .3s ease-out;font-weight:700;font-size:calc(2rem + 6px);color:var(--gray);text-align:start;}
.service-card-left-inner p{font-family:var(--default-font);font-weight:400;font-size:calc(1rem + 6px);color:var(--white);text-align:start;}

.service-card-right-inner{width:50px;height:50px;aspect-ratio:1;border-radius:50%;background-color:var(--gray);transition:background-color .3s ease-out;}
.service-card-right-inner i{color:var(--black);font-size:calc(2rem - 6px);transition:color .3s ease-out,transform .3s ease-out;transform:rotate(-45deg);}

.service-card:hover .service-card-left-inner span{color:var(--dcolor);}
.service-card:hover .service-card-right-inner{background-color:var(--dcolor);}
.service-card:hover .service-card-right-inner i{color:var(--gray);transform:rotate(0deg);}

/* WHY CHOOSE US */
.why-choose-us-container{width:80%;margin:80px auto 0;}
.why-choose-us-body{width:100%;margin:40px auto 0;display:flex;gap:0 20px;}

.why-choose-us-left,.why-choose-us-right{width:calc(100% / 2);}

.why-choose-us-left-inner{width:100%;display:grid;grid-template-columns:repeat(1,1fr);grid-template-rows:repeat(3,auto);gap:20px;}
.why-choose-card{width:100%;padding:25px 20px;border-radius:10px;border:1px solid var(--header-border-color);display:flex;flex-direction:column;align-items:flex-start;gap:15px 0;position:relative;}
.why-choose-card span{color:var(--dcolor);font-size:calc(2rem);font-family:var(--default3-font);text-align:start;font-weight:600;position:relative;display:flex;align-items:center;gap:0 10px;}
.why-choose-card p{color:var(--white);font-size:calc(1rem + 4px);font-family:var(--default3-font);text-align:start;font-weight:400;}
.why-choose-card span::before{content:'';width:20px;height:20px;background-color:var(--dcolor);}
.why-choose-card::before{content:'';position:absolute;width:100%;height:100%;top:0;left:0;background:linear-gradient(to right, transparent, rgba(128, 128, 128,.5));border-radius:10px;z-index:-1;}

.why-choose-us-right-inner{width:100%;height:100%;}
.why-choose-us-right-inner img{width:100%;height:100%;object-fit:cover;border-radius:20px;}

.why-choose-us-data{width:100%;display:flex;align-items:center;justify-content:space-between;margin:60px auto;}
.choose-data{flex-direction:column;gap:10px 0;}
.choose-data span:first-child{color:var(--gray);font-size:calc(4rem);font-family:var(--default3-font);font-weight:700;}
.choose-data span:last-child{color:var(--white);font-size:calc(1rem + 2px);font-family:var(--default3-font);}

/* CONTACT US */
.contact-us-container{width:100%;background-color:var(--contact-us-bg);margin:80px auto 0;}
.contact-us-container *{color:var(--black);}
.contact-us-inner-container{width:80%;margin:0 auto;padding:100px 0;display:flex;align-items:flex-start;gap:0 20px;}

.contact-us-left,.contact-us-right{width:calc(100% / 2);}
.about-us-top-title.contact-us-title :is(span,i){color:var(--black);}
.contact-us-left{display:flex;flex-direction:column;gap:20px 0;align-items:flex-start;}
.contact-us-left-title{color:var(--black);font-size:calc(3rem);font-weight:600;text-align:start;font-family:var(--default3-font);text-transform:capitalize;}
.contact-us-left-subtitle{color:var(--black);font-size:calc(1rem + 6px);font-weight:400;text-align:start;font-family:var(--default3-font);margin-top:15px;}

.contact-us-inner-right{width:100%;background-color:var(--white);border-radius:10px;padding:30px;}

form.form-body{width:100%;display:flex;flex-direction:column;gap:30px 0;}

.form-input{display:flex;flex-direction:column;align-items:flex-start;gap:10px 0;}
.form-input label{color:var(--black);font-weight:700;font-size:calc(1rem + 4px);text-align:start;font-family:var(--default3-font);}
.form-input :is(input,select,textarea){border:none;border-bottom:2px solid var(--black);font-family:inherit;font-size:calc(1rem);color:var(--black);padding:7px 0;width:100%;background-color:transparent;font-weight:600;border-radius:0;}
.form-input label sup{color:var(--dcolor2);}

.form-input :is(input::placeholder,select::placeholder,textarea::placeholder){color:var(--gray);}

.form-input-doubled{display:flex;align-items:center;gap:0 20px;}
.form-input-doubled .form-input{width:calc(100% / 2);}

select{appearance:base-select;}
select::picker(select){appearance:base-select;}

.form-input.submit-btn{margin:10px auto 0;width:100%;}
.form-input.submit-btn button{width:100%;border-radius:3px;padding:15px 0;background-color:var(--black);color:var(--gray);font-family:var(--default3-font);cursor:pointer;font-weight:700;font-size:calc(1rem + 8px);border:none;}

.not-interested{margin:20px auto 0;width:100%;}
.not-interested span{font-size:calc(1rem + 2px);color:var(--black);font-weight:300;font-family:var(--default3-font);}
.not-interested span a{font-weight:700;font-family:var(--default3-font);font-size:calc(1rem + 4px);color:var(--black);border-bottom:1px solid var(--black);}

/* FOOTER */
footer{width:100%;margin:80px auto;}
.footer-container{width:80%;margin:0 auto;display:flex;align-items:flex-start;gap:0 100px;}

.footer-logo-desc{display:flex;align-items:flex-start;gap:0 10px;}
.footer-logo-desc img{width:100px;aspect-ratio:16/7;object-fit:cover;}

.footer-logo-text{display:flex;flex-direction:column;align-items:flex-start;gap:10px 0;}
.footer-logo-text span:first-child{font-weight:700;color:var(--gray);font-size:calc(2rem);text-align:start;font-family:var(--default3-font);white-space:nowrap;}
.footer-logo-text span:last-child{font-weight:300;color:var(--white);font-size:calc(1rem);text-align:start;font-family:var(--default3-font);white-space:nowrap;}

.footer-details{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2, auto);gap:30px;}

.footer-details-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px 0;}
.footer-details-card h5{color:var(--gray);font-size:calc(1rem + 8px);font-weight:700;font-family:var(--default3-font);}
.footer-details-card :is(span,span a){color:var(--white);font-size:calc(1rem + 2px);font-weight:400;font-family:var(--default-font);}

.footer-details-card span a{transition:color .3s ease-out;}
.footer-details-card span a:hover{color:var(--dcolor);}

.footer-social-media{display:flex;align-items:center;gap:0 10px;justify-content:flex-start;}

.footer-social-media a{width:50px;height:50px;aspect-ratio:1;background-color:transparent;border:1px solid var(--header-border-color);border-radius:50%;transition:background-color .3s ease-out;}
.footer-social-media a i{font-size:calc(1rem + 8px);color:var(--gray);transition:color .3s ease-out;}

.footer-social-media a:hover{background-color:var(--dcolor);}
.footer-social-media a:hover i{color:var(--black);}

.footer-right-reserved{width:100%;margin:50px auto 0;border-top:1px solid var(--header-border-color);padding:40px 0 0;}
.footer-right-reserved p{text-align:center;font-size:calc(1rem + 2px);color:var(--white);font-family:var(--default3-font);}

@media screen and (max-width: 768px) {
    body{overflow-x:hidden;}
    header nav{width:100%;padding:20px;} 
    .menu-btn{display:flex;position:relative;z-index:99999;}
    .menu-btn i{transition:all .3s ease-out;}
    .menu-btn i::before{transition:all .3s ease-out;}
    
    .sub-menu-contact-container{clip-path:circle(0% at right top);transition:clip-path .3s ease-out;}
    .sub-menu-contact-container.show{clip-path:circle(100%);}
    .sub-menu-contact-container{position:fixed;height:auto;width:100%;background-color:var(--dcolor);right:0;top:0;flex-direction:column;align-items:flex-start;justify-content:initial;bottom:0;gap:30px 0;padding:100px 30px 50px;overflow-y:auto;}
    .sub-menu-contact-container::before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.2);z-index:-1;overflow-y:auto;}

    .sub-menu-ul{flex-direction:column;gap:30px 0;align-items:flex-start;}
    .sub-menu-li a:hover{color:var(--gray);}
    .sub-menu-li a::after{background-color:var(--gray);}

    /* HERO SECTION */
    .top-header-title h1{font-size:4rem;text-align:center;}
    .top-header-title h1 span{flex-direction:column;gap:20px 0;}
    .top-header-title h1 span .inner-h1-text{font-size:calc(2rem - 4px);}
    .top-header-title h1 span .inner-h1-text br{display:none;}
    .top-header-title h1 span .inner-h1-text::after{left:0;}

    .top-header-image{width:100%;}
    .top-header-image img{aspect-ratio:16/12;}
    .book-free-call{left:auto!important;right:auto;}

    /* PARTNERS */
    .partner-image-card{padding:5px;width:calc(100% / 1.5);min-width:calc(100% / 1.5);}

    /* ABOUT US */
    .about-us-top-title span{font-size:2rem;}
    .our-service-subtitle{font-size:calc(1rem + 8px);}

    .about-us-body{flex-direction:column;gap:20px 0;}
    .about-us-desc, .about-us-image{width:100%;}
    .about-us-mission p br{display:none;}

    /* OUR SERVICES */
    .our-services-body{flex-direction:column;display:flex;}
    .service-card-left-inner span{font-size:calc(2rem);}
    .service-card-left-inner p{font-size:1rem;}

    /* WHY CHOOSE US */
    .why-choose-us-body{flex-direction:column;gap:20px 0;}
    .why-choose-us-left, .why-choose-us-right{width:100%;}
    .why-choose-us-right-inner{aspect-ratio:1;}
    .why-choose-us-data{display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, auto);gap:20px;}

    /* CONTACT US */
    .contact-us-inner-container{flex-direction:column;gap:20px 0;}
    .contact-us-left, .contact-us-right{width:100%;}
    .contact-us-left-title{font-size:calc(2rem);}
    .contact-us-left-subtitle{margin:0;}
    .contact-us-inner-right{padding:25px 15px;}

    /* FOOTER DETAILS */
    .footer-logo-desc{flex-direction:column;gap:10px 0;}
    .footer-details{flex-direction:column;display:flex;}
    .footer-logo-text span:first-child{white-space:wrap;}
    .footer-logo-text span:last-child{white-space:wrap;}


    /* FOOTER */
    .footer-container{flex-direction:column;gap:30px 0;}
    .footer-right-reserved{padding:40px 20px 0;}

    /* CONTAINERS */
    .main-top-container,.partners-container,.footer-container,.contact-us-inner-container,.why-choose-us-container,.our-services-container,.about-us-container{width:90%;}

}

@media screen and (min-width: 769px) and (max-width:1200px) {

    /* HERO SECTION */
    .top-header-title h1{font-size:4rem;text-align:center;}
    .top-header-title h1 span{flex-direction:column;gap:20px 0;}
    .top-header-title h1 span .inner-h1-text{font-size:calc(2rem - 4px);}
    .top-header-title h1 span .inner-h1-text br{display:none;}
    .top-header-title h1 span .inner-h1-text::after{left:0;top:-16px;}

    /* FOOTER */
    .footer-container{flex-direction:column;gap:30px 0;}

    /* CONTAINERS */
    .main-top-container,.partners-container,.footer-container,.contact-us-inner-container,.why-choose-us-container,.our-services-container,.about-us-container{width:85%;}
}