/*!



Theme Name: kdesigns



Theme URI: http://underscores.me/



Author: Ali KDM



Author URI: https://kdesigns.ir/



Description: Description



Version: 1.0.0



Tested up to: 6.7



Requires PHP: 7.4



License: GNU General Public License v2 or later



License URI: LICENSE



Text Domain: kdesigns



Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready







This theme, like WordPress, is licensed under the GPL.



Use it to make something cool, have fun, and share what you've learned.







kdesigns is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.



Underscores is distributed under the terms of the GNU GPL v2 or later.







Normalizing styles have been helped along thanks to the fine work of



Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/



*/











/*fonts*/



@font-face {



    font-family: 'dana';



    src: url('fonts/eot/dana-regular.eot');



    src:



        url('fonts/woff/dana-regular.woff') format('woff'),



        url('fonts/woff2/dana-regular.woff2') format('woff');



    font-weight: 300;



}



@font-face {



    font-family: 'dana';



    src: url('fonts/eot/dana-bold.eot');



    src:



        url('fonts/woff/dana-bold.woff') format('woff'),



        url('fonts/woff2/dana-bold.woff2') format('woff');



    font-weight: 600;



}



/*fonts*/







/*override*/



fieldset {



    border: 1px solid var(--dark);



    margin-top: 2.5em;



    border-radius: 3px;



    padding: 2.5em;



}



legend {



    box-sizing: border-box;



    display: table;



    max-width: 100%;



    padding: 0;



    white-space: normal;



    padding-left: 1em;



    padding-right: 1em;



    color: var(--dark);



    font-size: 1em;



}



.row {



    margin-bottom: 0;



}



.sidenav {



    width: 450px;



}



.wp-block-image {



    margin: 5em 0 0;



    width: 100%;



}



.wp-block-image img {



    max-width: 100%;



    width: 100%;



    height: auto;



    display: block;



    object-fit: contain;



}



.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {



    background: var(--primary);



    letter-spacing: 0;



    padding: 1em;



    border-radius: 10px;



    margin-bottom: 1em;



    transition: .3s all;



    font-weight: normal;



    font-family: 'dana', serif;



}



.woocommerce-Input.woocommerce-Input--text.input-text {



    padding-left: 1em;



    padding-right: 1em;



    height: 3em;



    font-family: 'dana', serif;



}



.woocommerce form.checkout_coupon, .woocommerce form.login, .woocommerce form.register {



    border: none;



}



.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme {



    display: block;



    margin-top: 1em;



    margin-bottom: 1.5em;



    color: var(--dark);



    font-weight: bold;



}



.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme span {



    padding-right: 2em;



}



.woocommerce form .form-row label {



    color: var(--dark);



    font-size: 1em;



}



.woocommerce-privacy-policy-text {



    display: none;



}



.woocommerce-account .woocommerce-MyAccount-navigation {



    border-radius: 10px;



    border: 1px solid var(--dark);



    width: 100%;



    margin-top: 3em;



    margin-bottom: 1em;



    padding: .5em;



    box-shadow: none;



    background: white;



    height: max-content;



}



.woocommerce-MyAccount-navigation ul {



    display: flex;



    flex-direction: row;



    align-content: center;



    justify-content: center;



    align-items: center;



}



li.woocommerce-MyAccount-navigation-link a {



    color: var(--dark);



    height: 2.5em;



    line-height: 2.5em;



}



li.woocommerce-MyAccount-navigation-link:not(:last-child) a {



    border-left: 1px solid;



}



li.woocommerce-MyAccount-navigation-link.is-active a {



    font-weight: 900;



}



.woocommerce-account .woocommerce-MyAccount-content {



    width: 100%;



}



.woocommerce form .form-row input.input-text {



    border: 1px solid var(--dark);



    font-family: 'dana', serif;



    padding-left: 1em;



    padding-right: 1em;



    height: 3em;



    border-radius: 3px;



}



.woocommerce-error, .woocommerce-info, .woocommerce-message {



    border-top: 3px solid var(--dark) !important;



    background-color: var(--light);



    color: var(--dark);



    padding: 1em 3.5em 1em 2em;



    margin: 0 0 2em;



    border-radius: 10px;



    margin-top: 1em;



    margin-bottom: 1em;



    font-weight: 900;



    position: relative;



    list-style: none outside;



    width: auto;



    word-wrap: break-word;



}



.woocommerce-message::before {



    color: var(--dark);



}



/*override*/







/*colors*/



:root {



    --primary: #B5FFF3;



    --secondary: #ffdfb5;



    --light: #FFF4E6;



    --dark: #262626;



}



.primaryColor {



    color: var(--primary);



}



.primaryBackColor {



    background-color: var(--primary);



}



.secondaryColor {



    color: var(--secondary);



}



.secondaryBackColor {



    background-color: var(--secondary);



}



.lightColor {



    color: var(--light);



}



.lightBackColor {



    background-color: var(--light);



}



.darkColor {



    color: var(--dark);



}



.darkBackColor {



    background-color: var(--dark);



}



.lightGradient {



    background: var(--light);



    background: linear-gradient(235deg, var(--light) 0%, var(--secondary) 100%);



}



/*colors*/







/*general*/



body {



    font-family: 'dana', serif;



}



p {



    text-align: justify;



    font-size: 1.1em;



    line-height: 2;



}



video {



    width: 100%;



    height: auto;



}



iframe {



    width: 100%;



    margin-top: 1em;



    border: none

}



th, td {



    text-align: right;



}



nav {



    transition: .3s;



}



.width100 {



    width: 100%;



}



.flex {



    display: flex;



    flex-wrap: wrap;



}



.flexCenter {



    display: flex;



    justify-content: center;



    align-items: center;



}



.dBlock {



    display: block;



}



.dInlineBlock {



    display: inline-block !important;



}



.pRelative {



    position: relative;



}



.pAbsolute {



    position: absolute;



}



.ma0 {



    margin: 0 !important;



}



.mx0 {



    margin-left: 0;



    margin-right: 0;



}



.mxHalf {



    margin-left: .5em;



    margin-right: .5em;



}



.mx1 {



    margin-left: 1em;



    margin-right: 1em;



}



.mt0 {



    margin-top: 0

}



.mtHalf {



    margin-top: .5em

}



.mt1 {



    margin-top: 1em

}



.mt2 {



    margin-top: 2em

}



.mt3 {



    margin-top: 3em

}



.mt4 {



    margin-top: 4em

}



.mt5 {



    margin-top: 5em

}



.mt10 {



    margin-top: 10em

}



.mt11 {



    margin-top: 11em;



}



.mt12 {



    margin-top: 12em;



}



.mb0 {



    margin-bottom: 0

}



.mb1 {



    margin-bottom: 1em !important;



}



.mb2 {



    margin-bottom: 2em

}



.mb3 {



    margin-bottom: 3em

}



.mb5 {



    margin-bottom: 5em

}



.mrHalf {



    margin-right: .5em

}



.mlHalf {



    margin-left: .5em

}



.mr1 {



    margin-right: 1em

}



.mr3 {



    margin-right: 3em

}



.mr15px {



    margin-right: 15px;



}



.pa0 {



    padding: 0 !important;



}



.paQuart {



    padding: .25em !important;



}



.paHalf {



    padding: .5em !important;



}



.pa1 {



    padding: 1em !important;



}



.pa2 {



    padding: 2em !important;



}



.pa3 {



    padding: 3em !important;



}



.pa5 {



    padding: 5em !important;



}



.px0 {



    padding-left: 0 !important;



    padding-right: 0 !important;



}



.px1 {



    padding-left: 1em !important;



    padding-right: 1em !important;



}



.px2 {



    padding-left: 2em !important;



    padding-right: 2em !important;



}



.pt0 {



    padding-top: 0 !important;



}



.pt1 {



    padding-top: 1em !important;



}



.ptQuart {



    padding-top: .25em !important;



}



.ptHalf {



    padding-top: .5em !important;



}



.pt3 {



    padding-top: 3em !important;



}



.pt5 {



    padding-top: 5em !important;



}



.pt10 {



    padding-top: 10em !important;



}



.pb0 {



    padding-bottom: 0 !important;



}



.pb1 {



    padding-bottom: 1em !important;



}



.pb3 {



    padding-bottom: 3em !important;



}



.pb5 {



    padding-bottom: 5em !important;



}



.pl3 {



    padding-left: 3em !important;



}



.pr1 {



    padding-right: 1em !important;



}



.pr3 {



    padding-right: 3em !important;



}



.pr15px {



    padding-right: 15px;



}



.borderB {



    border-bottom: .1em solid;



}



.minH50vh {



    min-height: 50vh;



}



.maxH65vh {



    max-height: 65vh;



}



.minH75vh {



    min-height: 75vh;



}



.minH100vh {



    min-height: 100vh;



}



.zIndex1 {



    z-index: 1;



}



.zIndex3 {



    z-index: 3;



}



.fontW300 {



    font-weight: 300;



}



.fontW600 {



    font-weight: 600;



}



.fontSize1 {



    font-size: 1em;



}



.fontSizeFix {



    font-size: 1.5em;



}



.fontSize2 {



    font-size: 2em;



}



.ltr {



    direction: ltr;



}



.lineHfix {



    line-height: 1.5;



}



.lineH2 {



    line-height: 2;



}



.borderRadius1 {



    border-radius: 1em;



}



.borderRadius3 {



    border-radius: 3em;



}



.overflowHidden {



    overflow: hidden;



}



.rotate180 {



    transform: rotate(180deg);



}



.carousel {



    cursor: move;



    cursor: grab;



    cursor: -moz-grab;



    cursor: -webkit-grab;



}



.btnAccent {



    border-radius: 3em;



    height: 1.5em !important;



    line-height: 1.5em !important;



}



.btn-large {



    border-radius: 10px;



}



.btn-large:hover, .btnAccent:hover {



    color: black !important;



    background-color: white !important;



    transform: scale(1.05);



}



.btnIconKD {



    width: 2em;



    margin-top: .75em;



    margin-right: 1.5em;



}



.inlineLink {



    border: 1px solid;



    padding-left: 1em;



    padding-right: 1em;



    transition: .3s;



}



.inlineLink:hover {



    opacity: .75;



}



/*general*/







/*nav*/



.headerNav {



    position: absolute;



    width: 100%;



    top: 1em;



    padding-right: 1em;



    padding-left: 1em;



    z-index: 3;



}



.sideNavContact {



    bottom: 0;



    width: 100%;



}



.soonKD {



    opacity: .25 !important;



}



.menuItemKD span {



    right: 6em;



    position: absolute;



    color: #425e5a;



}



/*nav*/







/*work*/



.workTile img {



    width: 100%;



    height: 100%;



    object-fit: cover;



    object-position: top;



    box-shadow: 0 0 5em 0 #0000003b;

    border-radius: 1em;

    transition: .5s;



}



.workPlate {

    height: 25vw;

    border-radius: 1em;

}



.workTitleInside {



    right: 0;



    bottom: -0.7em;



}



.workTitleOutside {



    margin-top: -.6em

}



.workTitleInside, .workTitleOutside {



    font-size: 3em;



}



.workTileData h6 {



    border-bottom: 1px solid;



    line-height: 1.5;



}



.eachWorkTechnology {



    border: 1px solid;



    text-transform: uppercase;



    line-height: 2.7;



}



.adjacentPostKD {



    border: 1px solid;



    transition: .3s;



}



.adjacentPostKD:hover {



    background-color: black;



}



.visitSiteLink {



    left: 1.75em;



    top: 1em;



    border: .1em solid;



    transition: .3s all;



}



/*work*/







/* articles */



.featureContainer img {



    width: 5em;



    margin: auto;



    display: block;



}



.featureContainer {



    border: 1px solid var(--dark)

}



/* articles */







/*tuts*/



#tutTitle {



    font-size: 2.25em;



}



#tutContent p, #tutContent li {



    font-size: 1.15em;



    line-height: 2;



}



#tutContent li {

    color: var(--dark);

    list-style: circle;

    width: 100%;

}



#tutContent ul {



    padding: 1em 2.5em 1em 1em;



    background: #B5FFF3;



}



#tutContent h2, #resources h2 {



    font-size: 2em;



    font-weight: 600;



    margin-top: 1.5em;



    margin-bottom: 0;



    line-height: 1.5;



}



#tutContent p code {



    font-weight: 600;



    background: #B5FFF3;



    padding-left: .3em;



    padding-right: .3em;



    border-radius: 3px;



}



#tutContent .wp-block-image {



    margin: 1em 0 0;



}



#tutContent .hcb_wrap {



    direction: ltr;



}

#tutContent nav {

    display: flex;

    flex-direction: column;

    height: max-content;

    box-shadow: none;

}

#tutContent nav ul a {

    color: var(--dark);

    background: white;

    border: 1px solid;

    font-size: 1em;

    margin-top: 0.15em;

    margin-bottom: 0.15em;

    padding-top: 0.15em;

    padding-bottom: 0.15em;

    border-radius: 0.5em;

}

#resources a {



    color: var(--primary);



    border: .1em solid;



    padding-left: 1em;



    padding-right: 1em;



    padding-top: .3em;



    border-radius: 1em;



}

#rank-math-toc h2 {

    background: var(--primary);

    padding-top: 0.5em;

    padding-right: 0.75em;

}

.englishTitleTut {



    font-size: .75em !important;



}



.singleTutFeatureImage {



    margin-top: -10em;



}



/*tuts*/







/*footer*/



.logoLettersContainer {



    border: 3px solid;



    border-radius: 3em;



}



.logoLettersKD {



    line-height: .9;



    font-size: 2em;



}



/*footer*/







/*comments*/



#reply-title {



    font-size: 2em;



    font-weight: 600;



    margin-top: 1.5em;



    margin-bottom: 0;



    line-height: 1.5;



}



#commentform input#submit {



    background: var(--dark);



    color: var(--light);



    padding: 1em 1.5em;



    border-radius: 0.5em;



    border: none;



    font-family: 'dana', serif;



    font-weight: bold;



    cursor: pointer;



}



#commentform textarea {



    resize: none;



    text-align: justify;



    font-family: 'dana';



    height: 10em;



    border-radius: 0.5em;



    padding: 1em;



    line-height: 1.5;



    border: 1px solid var(--dark);



}



#respond input {



    padding: .5em;



    border-radius: 0.5em;



    line-height: 1.5;



    display: block;



    resize: none;



    text-align: justify;



    font-family: 'dana';



    background: transparent;



    border: 1px solid var(--dark);



}



#respond label {



    font-size: .9em;



    color: var(--dark);



}



h2.comments-title {



    display: none;



}



li.comment {



    list-style: none;



}



img.avatar {



    display: none;



}



div.reply {



    display: none;



}



/*comments*/







/*responsiveness*/



@media only screen and (min-width: 992px) {}



@media only screen and (max-width: 992px) {



    .carousel {



        height: 20em;



    }



    .carousel .carousel-item {



        height: 15em !important;



    }



    .footerNavContainer {



        padding-left: 5em;



        padding-right: 5em;



    }



    .footerNavContainer div {



        margin-bottom: .5em;



        margin-top: .5em;



    }



    .workPlate {



        height: 50vw;



    }



    .logoLettersContainer {



        border: 2px solid;



    }



}



@media only screen and (max-width: 600px) {



    .carousel {



        height: 17em;



    }



    .carousel .carousel-item {



        height: 17em !important;



    }



    .sidenav {



        width: 85%;



    }



    .sidenav-trigger {



        border-radius: 10em;



        width: 4em;



        height: 4em;



        padding: 0;



        position: fixed;



        left: 1em;



        top: 1em;



        z-index: 100;



    }



    .sidenav-trigger img {



        width: 70%;



        margin: auto;



        display: block;



        left: 0;



        right: 0;



        position: absolute;



        top: 0;



        bottom: 0;



    }



    .workPlate {



        padding: 2.5em !important;



    }



    .workTitleInside, .workTitleOutside {



        font-size: 2em;



    }



    .workTitleInside {



        bottom: -0.9em;



    }



    .footerNavContainer {



        padding-left: 2.5em;



        padding-right: 2.5em;



    }



}



/*responsiveness*/